添加edit todo功能并在react todo app中正确更新状态

Question

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.

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.

My edit todo function:

editTodo = (title) => {
    console.log("Edit todo:" + title)
    const editTodo = {
      title:title,
      edited: false
    }
    this.setState({ todos: [
      ...this.state.todos, editTodo 
    ]
  });
  }

My edit button next to todo item:

<button className="edit-btn" onClick={this.props.editTodo.bind(this, id)}>EDIT</button>

My edit todo component

class EditTodo extends Component {
  state = {
    edited: false
  }

  onSubmit = (e) => {
    e.preventDefault();
    this.props.editTodo(this.state.title); 
    this.setState({ title: ''}); 
  }

  onChange = (e) =>
  this.setState({
    [e.target.name]: e.target.value  
  }
  );


  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input
          type="text"
          name="title"
          placeholder="Edit Your Todo"
          value={this.state.title}
          onChange={this.onChange}
        />
        <button
          type="submit">
          Edit
        </button>
      </form>
    )
  }
}

Update:

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:

Here is my delete todo function

deleteTodo = (id) => {
    axios.delete(`http://localhost:3004/todos/${id}`)
    .then(res => this.setState({
      todos: [
        ...this.state.todos.filter(todo => 
          todo.id !== id 
        )]
    }));
  }
``

Answer 1

The approach I followed initially was not working. Ref's solved my problem, the final solution posted here: edit todo list state not passed correctly in react with axios