title: How to update state with usestate in an array of objects?
body: <p>I'm having some trouble with the React useState hook. I have a todolist with a checkbox button and I want to update the 'done' property to 'true' that has the same id as the id of the 'clicked' checkbox button. If I console.log my 'toggleDone' function it returns the right id. But I have no idea how I can update the right property.</p>
  <p>The current state:</p>
  <pre><code>const App = () =&gt; {
  
    const [state, setState] = useState({
      todos: 
      [
          {
            id: 1,
            title: 'take out trash',
            done: false
          },
          {
            id: 2,
            title: 'wife to dinner',
            done: false
          },
          {
            id: 3,
            title: 'make react app',
            done: false
          },
      ]
    })
  
    const toggleDone = (id) =&gt; {
      console.log(id);
  }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
          &lt;Todos todos={state.todos} toggleDone={toggleDone}/&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>The updated state I want:</p>
  <pre><code>const App = () =&gt; {
  
    const [state, setState] = useState({
      todos: 
      [
          {
            id: 1,
            title: 'take out trash',
            done: false
          },
          {
            id: 2,
            title: 'wife to dinner',
            done: false
          },
          {
            id: 3,
            title: 'make react app',
            done: true // if I checked this checkbox.
          },
      ]
    })
  </code></pre>