So when I call my handleRemove function here, if i return and console.log el, I get each one of my todos. However, if I return and console.log el[index], OR el[index].id, I get nothing but an empty array. I've looked into the docs of the Array.prototype.filter method but I don't understand what I am doing wrong here.

import React, { Component } from 'react';

import TodoInput from './todo-input';

import TodoList from './TodoList';



class App extends Component {

  constructor(props){

    super(props);

    this.state = {

      todos: ,

      inputValue: ''

    }

    this.handleChange = this.handleChange.bind(this);

    this.handleSubmit = this.handleSubmit.bind(this);

    this.handleRemove = this.handleRemove.bind(this);

  };



  handleChange = (e) => {

    e.preventDefault();

    this.setState({

      inputValue: e.target.value

    });

  }



  handleSubmit = (e) => {

    e.preventDefault();

    const newTodo = {

      title: this.state.inputValue,

      id: Date.now(),

      done: false

    };

    this.setState((prevState) => ({

      todos: [...prevState.todos, newTodo],

      inputValue: ''

    }));

  }



  handleRemove = (e) => {

    e.preventDefault();

    const newTodos = this.state.todos.filter((el, index) => el[index]);

    // this.setState((prevState) => ({

    //   todos: newTodos

    // }));

    console.log(newTodos);

  }



  render() {

    return (

        <div>

          <TodoInput

          value={this.state.inputValue}

          onChange={this.handleChange}

          onSubmit={this.handleSubmit}

          />

          <TodoList 

          todosArr={this.state.todos}

          onRemove={this.handleRemove}

          />

        </div>

    );

  }

}



export default App;

TodoList.js

import React, { Component } from 'react';

import TodoItem from './TodoItem';



class TodoList extends Component {

  render() {

    const mappedTodos = this.props.todosArr.map((todo, index) => 

      <TodoItem

      key={index}

      todoTitle={todo.title}

      handleRemove={this.props.onRemove}

      todoId={todo.id}

      />

    );



    return (

      mappedTodos

    );

  }

}



export default TodoList;

Filter expects a true/false response, so you need to compare el to some kind of condition, like for example an id.

Demo

https://repl.it/@AnonymousSB/SO53402083

import React, { Component } from 'react';



class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      todos: [

        { id: 123, value: 'Water the dog' },

        { id: 456, value: 'Rake the floor' }

      ]

    }

  }

  handleRemove(e, id) {

    const todos = this.state.todos.filter(todo => todo.id !== id)

    this.setState({ todos })

  }

  render() {

    return (

      <section style={{width: 500}}>

        <ul>

          {this.state.todos.map(todo => {

            return <li onClick={(e) => this.handleRemove(e, todo.id)}>{todo.value}</li>

          })}

        </ul>

      </section>

    );

  }

}



export default App;