title: Spread Operator when setting State in React
body: <p>I have the following object in default state:</p>
  <pre><code>const [data, setData] = useState({name: &quot;&quot;, products: []})
  </code></pre>
  <p>I have 2 Select elements with an onChange event handler:</p>
  <pre><code>&lt;Select onChange={() =&gt; setData({...data, products: [...data.products, {id: 1, ...data.products[0]}]})})&lt;/Select&gt;
  
  &lt;Select onChange={() =&gt; setData({...data, products: [...data.products, {...data.products[0], qty: 1}]})})&lt;/Select&gt;
  </code></pre>
  <p>When I do a</p>
  <pre><code>console.log(data);
  </code></pre>
  <p>I get <code>{name: &quot;&quot;, products[{qty: 1},...]}</code> only. How do I make this so the id is appended to the array as well?</p>