Как реализовать кнопку «редактировать»?

Question

[Bart Simpson]

Пишу тудушку которая состоит из трех компонентов, юзер вводит таску и она отображается в листе, эту таску можно удалить и сейчас хочу реализовать кнопку редактировать, но нет понимания как это сделать. Наверно нужно создать стейт по-типу [edited, setEdited] = useState(false), а потом при нажатии на кнопку менять состояние и как-то менять value...
Ссылка на мой код: https://codepen.io/IvaLu/pen/ZERwERx?editors=0010

Answer 1

[0xD34F]

const editTodo = (id, title) => {
  setTodos(todos.map(n => n.id === id
    ? { ...n, title }
    : n
  ));
};

function TodoItem({ complete, title, id, removeTodo, toggleTodo, editTodo }) {
  const [ isEdit, setIsEdit ] = useState(false);
  const [ editValue, setEditValue ] = useState('');

  return (
    <div className="todo-item">
      <input type="checkbox" checked={complete} onChange={() => toggleTodo(id)} />
      {isEdit
        ? <>
            <input value={editValue} onChange={e => setEditValue(e.target.value)} />
            <button onClick={() => (setIsEdit(false), editTodo(id, editValue))}>Save</button>
            <button onClick={() => setIsEdit(false)}>Cancel</button>
          </>
        : <span onDoubleClick={() => (setIsEdit(true), setEditValue(title))}>{title}</span>
      }
      <button onClick={() => removeTodo(id)}>X</button>
    </div>
  );
}

Comments

[Bart Simpson]

Спасибо