title: Add new child objects to existing object in React
body: <p>I am trying to update through useState a child object with an additional object.  I created an example to make this more clear :</p>
  <p><a href="https://codesandbox.io/s/affectionate-wescoff-u01x0?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/affectionate-wescoff-u01x0?file=/src/App.js</a></p>
  <p>The example object looks like :</p>
  <pre><code>{
    &quot;id&quot;: 123,
    &quot;books&quot;: {
      &quot;book&quot;: {}
    }
  }
  </code></pre>
  <p>When I push more data in I want it to look like this :</p>
  <pre><code>{
    &quot;id&quot;: 123,
    &quot;books&quot;: {
       &quot;book&quot;: {
        &quot;name&quot;: &quot;Sirens of Titan&quot;,
        &quot;author&quot;: &quot;Kurt Vonnegut&quot;
        },
       &quot;book&quot;: {
        &quot;name&quot;: &quot;The Hobbit&quot;,
        &quot;author&quot;: &quot;J.R.R. Tolkein&quot;
      }
    }
  }
  </code></pre>
  <p>At this stage I have it pretty messed up and it looks like :</p>
  <pre><code>{
     &quot;id&quot;:123,
     &quot;books&quot;:[
        {
           &quot;0&quot;:{
              &quot;book&quot;:{
                 
              },
              &quot;sampleData1&quot;:{
                 &quot;book&quot;:{
                    &quot;name&quot;:&quot;Sirens of Titan&quot;,
                    &quot;author&quot;:&quot;Kurt Vonnegut&quot;
                 }
              }
           },
           &quot;sampleData2&quot;:{
              &quot;book&quot;:{
                 &quot;name&quot;:&quot;The Hobbit&quot;,
                 &quot;author&quot;:&quot;J.R.R. Tolkein&quot;
              }
           }
        }
     ]
  }
  </code></pre>
  <p>This is the way I set that broken object :</p>
  <pre><code>  const [main, setMain] = useState(library);
  
    function addNestedObj() {
      setMain({ ...main, books: [{ ...main.books, sampleData1 }] });
    }
  </code></pre>