title: Filter function returns an empty array?
body: <p>So when I call my handleRemove function here, if i return and console.log <code>el</code>, 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. </p>
  
  <pre><code>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) =&gt; {
      e.preventDefault();
      this.setState({
        inputValue: e.target.value
      });
    }
  
    handleSubmit = (e) =&gt; {
      e.preventDefault();
      const newTodo = {
        title: this.state.inputValue,
        id: Date.now(),
        done: false
      };
      this.setState((prevState) =&gt; ({
        todos: [...prevState.todos, newTodo],
        inputValue: ''
      }));
    }
  
    handleRemove = (e) =&gt; {
      e.preventDefault();
      const newTodos = this.state.todos.filter((el, index) =&gt; el[index]);
      // this.setState((prevState) =&gt; ({
      //   todos: newTodos
      // }));
      console.log(newTodos);
    }
  
    render() {
      return (
          &lt;div&gt;
            &lt;TodoInput
            value={this.state.inputValue}
            onChange={this.handleChange}
            onSubmit={this.handleSubmit}
            /&gt;
            &lt;TodoList 
            todosArr={this.state.todos}
            onRemove={this.handleRemove}
            /&gt;
          &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>TodoList.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import TodoItem from './TodoItem';
  
  class TodoList extends Component {
    render() {
      const mappedTodos = this.props.todosArr.map((todo, index) =&gt; 
        &lt;TodoItem
        key={index}
        todoTitle={todo.title}
        handleRemove={this.props.onRemove}
        todoId={todo.id}
        /&gt;
      );
  
      return (
        mappedTodos
      );
    }
  }
  
  export default TodoList;
  </code></pre>