Accepted answer
const App = (props) => {
  const [todos, setTodos] = React.useState([
    {name: 'A', done: false},
    {name: 'B', done: false},
    {name: 'C', done: false},

  const handleClick = (name) => {
      Here you were using todos.find which was returning the object. I switched
      over to todos.findIndex to give you the index in the todos array. 
    const index = todos.findIndex(todo => === name)
      In your code you are just setting tempTodos equal to todos. This isn't
      making a copy of the original array but rather a reference. In order to create 
      a copy I am adding the .slice() at the end. This will create a copy.
      This one used to get me all of the time.
    let tempTodos = todos.slice();
    tempTodos[index].done = true;
  return (
      <h1>Hello, world!</h1>
        {,index) => {
        return todo.done ? (<div key={index}>{} : done</div>) : (<div onClick={() => handleClick(} key={index}>{} : not done</div>)

  <App />,


const handleClick = n => setTodos( => === n ? {...t, done: true} : t));

Related Query

More Query from same tag