title: Add edit todo function and update state correctly in react todo app
body: <p>I have the following component which adds a todo to my todo list. The todo's are not displaying in input field but was thinking I can run onclick function if button is clicked then I can edit the existing todo. </p>
  
  <p>Here is what I have started with, I just need some guidance where to go from here. At the moment when I click on the edit todo button it adds another item but not editing the existing one. I have suspicion I am not editing the state as I am supposed to.  </p>
  
  <p>My edit todo function:</p>
  
  <pre><code>editTodo = (title) =&gt; {
      console.log("Edit todo:" + title)
      const editTodo = {
        title:title,
        edited: false
      }
      this.setState({ todos: [
        ...this.state.todos, editTodo 
      ]
    });
    }
  </code></pre>
  
  <p>My edit button next to todo item:</p>
  
  <pre><code>&lt;button className="edit-btn" onClick={this.props.editTodo.bind(this, id)}&gt;EDIT&lt;/button&gt;
  </code></pre>
  
  <p>My edit todo component</p>
  
  <pre><code>class EditTodo extends Component {
    state = {
      edited: false
    }
  
    onSubmit = (e) =&gt; {
      e.preventDefault();
      this.props.editTodo(this.state.title); 
      this.setState({ title: ''}); 
    }
  
    onChange = (e) =&gt;
    this.setState({
      [e.target.name]: e.target.value  
    }
    );
  
  
    render() {
      return (
        &lt;form onSubmit={this.onSubmit}&gt;
          &lt;input
            type="text"
            name="title"
            placeholder="Edit Your Todo"
            value={this.state.title}
            onChange={this.onChange}
          /&gt;
          &lt;button
            type="submit"&gt;
            Edit
          &lt;/button&gt;
        &lt;/form&gt;
      )
    }
  }
  </code></pre>
  
  <p>Update:</p>
  
  <p>I made some changes, implemented a fake backend and reviewed this again and it makes sense to use the same logic as the delete function, how can I change the following to edit my current todo:</p>
  
  <p>Here is my delete todo function</p>
  
  <pre><code>deleteTodo = (id) =&gt; {
      axios.delete(`http://localhost:3004/todos/${id}`)
      .then(res =&gt; this.setState({
        todos: [
          ...this.state.todos.filter(todo =&gt; 
            todo.id !== id 
          )]
      }));
    }
  ``
  </code></pre>