无法编辑待办事项列表中的待办事项

Question

I wanna edit my todo item but when i click on the edit button, nothing happens. Is my function wrong somewhere? Please help me to fix it, Btw. this function seems a little bit long and hard to understand for me? Do you guys have any cleaner codes can you recommend me? Thank you so much!

Sandbox link: https://codesandbox.io/s/funny-wind-s30er?file=/src/components/TodoForm.js

Answer 1

Here React state wont update as it shallow compares the todos state and not its values.

 const newTodos =  todos.map((item) => (item.id === todoId ? newValue : item))
setTodos(newTodos)

It might fixes the problem since we creates the new copy of it. so State bound to update here.