title: Deleting item on to do list
body: <p>I want to add a delete button to my 'Todo' component </p>
  
  <p>also make a method called deleteTodo in my 'App' component</p>
  
  <p>pass the deleteTodo method to the 'ToDo' component as a prop</p>
  
  <p>and finally add an onClick event listener to the delete button</p>
  
  <p>I've been stuck for days trying to figure this out any help would be much appreciated</p>
  
  <p>my Todo.js component </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&gt; &lt;/button&gt;
              &lt;/li&gt;
        );
      }
  }
  
  export default ToDo;
  
  
  
  </code></pre>
  
  <p>the App</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: [
            { description: 'Walk the cat', isCompleted: true },
            { description: 'Throw the dishes away', isCompleted: false },
            { description: 'Buy new dishes', isCompleted: false }
          ],
            newTodoDescription: ''
        };
     }
  
    deleteTodo() {}
  
    handleChange(e) {
        this.setState({ newTodoDescription: e.target.value })
      }
  
    handleSubmit(e) {
        e.preventDefault();
        if (!this.state.newTodoDescription) { return }
        const newTodo = { 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 });
      }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;ul&gt;
          { this.state.todos.map( (todo, index) =&gt; 
                      &lt;ToDo key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ () =&gt; this.toggleComplete(index) } /&gt;
                    )}
          &lt;/ul&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" /&gt;
                &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  
  
  </code></pre>