title: React Todo Delete Button Removes all listed items at once
body: <p>I have 2 files</p>
  
  <p>App.js</p>
  
  <pre><code>    import React, { Component } from 'react';
      import './App.css';
      import ToDo from './components/ToDo.js';
  
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            todos: [],
            newTodoDescription: ''
          };
          this.deleteTodo = this.deleteTodo.bind(this);
        }
  
      handleChange(e) {
        this.setState({ newTodoDescription: e.target.value })
      }
  
      handleSubmit(e) {
        e.preventDefault();
        if (!this.state.newTodoDescription) { return }
        const newTodo = { id: this.state.todos.id, description: this.state.newTodoDescription, isCompleted: false };
        this.setState({ todos: [...this.state.todos, newTodo], newTodoDescription: '' });
      }
  
  
      toggleComplete(index) {
        const todos = this.state.todos.slice();
        const todo = todos[index];
        todo.isCompleted = todo.isCompleted ? false : true;
        this.setState({ todos: todos });
      }
  
  
  
  
      deleteTodo(id) {
        const remainingToDos = this.state.todos.filter((todo, remainingToDos) =&gt; {
            if(todo.id !== remainingToDos.id) return todo; });
        this.setState({ todos: remainingToDos });
      }
  
  
        render() {
          return (
            &lt;div className="App"&gt;
              &lt;h1&gt;Add a ToDo!&lt;/h1&gt;
              &lt;form onSubmit={ (e) =&gt; this.handleSubmit(e)}&gt;
                &lt;input type="text"
                  value={ this.state.newTodoDescription }
                  onChange={ (e) =&gt; this.handleChange(e) }
                  /&gt;
                &lt;input type="submit" value="Add Todo" /&gt;
              &lt;/form&gt;
              &lt;ul&gt;
                { this.state.todos.map( (todo) =&gt;
                  &lt;ToDo key={ todo.id }
                    description={ todo.description }
                    isCompleted={ todo.isCompleted }
                    toggleComplete={ () =&gt; this.toggleComplete(todo) }
                    onDelete={ this.deleteTodo }
                     /&gt;
                )}
  
              &lt;/ul&gt;
            &lt;/div&gt;
          );
        }
      }
  
      export default App;
  </code></pre>
  
  <p>ToDo.js</p>
  
  <pre><code>      import React, { Component } from 'react';
  
        class ToDo extends Component {
          render() {
            return (
              &lt;li&gt;
                &lt;input type="checkbox" checked={ this.props.isCompleted } onChange={ this.props.toggleComplete } /&gt;
                &lt;span&gt;{ this.props.description }  {''}&lt;/span&gt;
                &lt;button onClick={() =&gt; this.props.onDelete(this.props.id)}&gt;Remove Todo&lt;/button&gt;
              &lt;/li&gt;
            );
          }
        }
  
        export default ToDo;
  </code></pre>
  
  <p>What I am trying to accomplish: Add many todos to the list. Click on the remove todo button. ONLY the todo that is selected will be removed. </p>
  
  <p>I am VERY new to react and cannot figure this out. In my deleteToDo method I am trying to filter out the todos and only keep the todos that are current. I am unclear if I am using .filter properly or not.</p>