почему setItem не позволяет 'кнопке редактирования' работать?

Question

Я пытаюсь поставить кнопку редактировать для каждого элемента с помощью простого крючка. Я использовал map , чтобы увидеть элементы элемента .... но почему-то он не работает ... при нажатии кнопки ничего не отображается ..... Ссылка Codesandbox: https://codesandbox.io/s/condescending-worker-s0igh app. js:

import React, { useState } from "react";

import TodoList from "./TodoFiles/TodoList";

const defaultItems = [
  { id: 1, title: "Write React Todo Project", completed: true },
  { id: 2, title: "Upload it to github", completed: false }
];

const App = () => {
  const [items,setItems]=useState(defaultItems)

    const editItem=({id,title})=>{
      setItems(items.map(p=>p.id===id?{...p,title}:p))

    }
  return (
     <div style={{ width: 400 }}>
      <hr />
      <TodoList
        items={items}
        editItem={editItem}/>
      <hr />
    </div>
  );
};
export default App;

TodoList. js:

import React from "react";

const TodoItem = ({ title, completed, editItem }) => {

  return (

    <div style={{ width: 400, height: 25 }}>
      <input type="checkbox" checked={completed} />
      {title}

      <button style={{ float: "right" }} onClick={() => editItem(title)}>
        Edit
      </button>
    </div>
  );
};
const TodoList = ({ items = [], index,editItem }) => {


  return items.map((p, index) => (
    <TodoItem
      {...p}
      key={p.id}
      index={index}
      editItem={editItem}
    />
  ));
};

export default TodoList;

Я не хочу использовать useEffect или useReducer для пользовательского хука ... потому что Я хочу практиковаться с основами. извините за мои частые вопросы, я так стараюсь выучить это reactjs, и я не хочу сдаваться ... спасибо заранее, и если это возможно, вы объясните некоторые простые тексты, почему это не так? работает.

Answer 1

Вы забыли передать id функции editItem для кнопки onClick в TodoItem компоненте.

Также вам не следует использовать старое состояние в функции setState, подобной этой (в функции editItem) , Вы должны использовать аргумент функции обновления. Благодаря этому вы всегда изменяете текущее состояние.

const editItem = ({id,title}) => {
   setItems(oldItems => (olditems.map(p=>p.id===id?{...p,title}:p)))
}

import React from "react";

const TodoItem = ({id, title, completed, editItem }) => {

  return (

    <div style={{ width: 400, height: 25 }}>
      <input type="checkbox" checked={completed} />
      {title}

      <button style={{ float: "right" }} onClick={() => editItem({id,title})}>
        Edit
      </button>
    </div>
  );
};
const TodoList = ({ items = [], index,editItem }) => {


  return items.map((p, index) => (
    <TodoItem
      {...p}
      key={p.id}
      index={index}
      editItem={editItem}
    />
  ));
};

export default TodoList;