Reactt JS Todolist Редактирование

Question

Я новичок в реагировании и пытаюсь редактировать список задач,

Я могу добавить вход в список, но, по сути, я хочу, чтобы, когда я нажимал на редактирование, я хотел, чтобы моя форма отправляла свой handleSubmit2, который должен редактировать специальный список.item, однако я хочу редактировать, не удаляя элемент в списке, я хочу внести изменения и заменить его, пока я нажимаю кнопку Edit (активация формы onSubmit = {this.handleSubmit2}).

Я хочу сохранить его идентификатор, когдаЯ редактирую и в процессе написания правки ввода я хочу увидеть старый элемент списка в Todo List, но после того, как я нажму edit, его следует заменить новым.

Я пытаюсь сделать это весь день, но без решения, я надеюсь, что кто-то может понять, И извините за мой английский, я сделал это длинной историей :)

import React from "react";
import uuid from "uuid";

class Todolist extends React.Component {
  state = { todolist: "", id: uuid(), edit: "", items: [], editclick: false };

  handleChange = event => {
    this.setState({ todolist: event.target.value });
  };
  handleSubmit = e => {
    e.preventDefault();
    const newstate = { id: this.state.id, todolist: this.state.todolist };
    const updatedstate = [...this.state.items, newstate];
    this.setState({
      items: updatedstate,
      id: uuid(),
      todolist: "",
      editclick: false
    });
  };
  clearList = event => {
    event.preventDefault();
    this.setState({ items: [] });
  };

  handleDelete = id => {
    this.setState({
      items: this.state.items.filter(item => {
        return item.id !== id;
      })
    });
  };
  handleEdit = id => {
    const editing = this.state.items.filter(items => items.id !== id);
    console.log(editing);
    const editing2 = this.state.items.find(items => items.id === id);
    console.log(editing2);
    this.setState({ todolist: editing2.todolist, editclick: true, id: id });
  };

  handleSubmit2 = e => {
    e.preventDefault();
    const newstate = { id: this.state.id, todolist: this.state.todolist };

    const editsubmit = this.state.items.filter(
      items => items.id !== this.state.id || [...this.state.items, newstate]
    );
    console.log(editsubmit);
    this.setState({ items: editsubmit, todolist: "", editclick: false });
  };

  render() {
    return (
      <div className="todoinput container">
        <div className="row">
          <div className="col-md-8 mx-auto text-center my-3 card card-body">
            <form
              onSubmit={
                this.state.editclick ? this.handleSubmit2 : this.handleSubmit
              }
            >
              <h2>Todo Input</h2>
              <div className="input-group">
                <div className="input-group-prepend">
                  <div className="input-group-text text-white bg-primary">
                    <i className="fas fa-book " />
                  </div>
                </div>

                <input
                  type="text"
                  onChange={this.handleChange}
                  value={this.state.todolist}
                  className="form-control"
                  placeholder="Add a Todo Item"
                />
              </div>
              <button
                type="submit"
                className={
                  this.state.editclick
                    ? "btn btn-block bg-success mt-3"
                    : "btn btn-block bg-primary mt-3"
                }
              >
                {this.state.editclick ? "Edit Item" : "Add Item"}{" "}
              </button>
            </form>
          </div>

          <div className="col-md-8 my-3 mx-auto card card-body">
            <ul className="list-group my-4 ">
              <h2 className="text-center">Todo List</h2>

              {this.state.items.map(items => {
                return (
                  <li
                    key={items.id}
                    className="list-group-item d-flex justify-content-between my-2"
                  >
                    {items.todolist}
                    <div>
                      <i
                        className="mx-2 fas fa-pen text-success"
                        onClick={() => this.handleEdit(items.id)}
                      />
                      <i
                        className="mx-2 fas fa-trash text-danger"
                        onClick={() => this.handleDelete(items.id)}
                      />
                    </div>{" "}
                  </li>
                );
              })}
            </ul>
            <button
              className="btn btn-block bg-danger"
              onClick={this.clearList}
            >
              Clear List
            </button>
          </div>
        </div>{" "}
      </div>
    );
  }
}

export default Todolist;