title: React: Setting State for Deeply Nested Objects w/ Hooks
body: <p>I'm working with a deeply nested state object in React.  My code base dictates that we try to stick with function components and so every time I want to update a key/value pair inside that nested object, I have to use a hook to set the state.  I can't seem to get at the deeper nested items, though. I have a drop down menu w/ an onChange handler. . .inside the onChange handler is an inline function to directly setValue of whatever key/val pair is changing.</p>
  
  <p>The syntax I'm using after the spread operator in each inline function is wrong, however.</p>
  
  <p>As a workaround, I have resorted to factoring out the inline function to its own function that rewrites the entire state object every time the state changes, but that is extremely time consuming and ugly.  I'd rather do it inline like the below:</p>
  
  <pre><code> const [stateObject, setStateObject] = useState({
  
      top_level_prop: [
        {
          nestedProp1: "nestVal1",
          nestedProp2: "nestVal2"
          nestedProp3: "nestVal3",
          nestedProp4: [
            {
              deepNestProp1: "deepNestedVal1",
              deepNestProp2: "deepNestedVal2"
            }
          ]
        }
      ]
    });
  
  &lt;h3&gt;Top Level Prop&lt;/h3&gt;
  
     &lt;span&gt;NestedProp1:&lt;/span&gt;
       &lt;select
         id="nested-prop1-selector"
         value={stateObject.top_level_prop[0].nestedProp1}
         onChange={e =&gt; setStateObject({...stateObject, 
         top_level_prop[0].nestedProp1: e.target.value})}
       &gt;
        &lt;option value="nestVal1"&gt;nestVal1&lt;/option&gt;
        &lt;option value="nestVal2"&gt;nestVal2&lt;/option&gt;
        &lt;option value="nestVal3"&gt;nestVal3&lt;/option&gt;
       &lt;/select&gt;
  
  &lt;h3&gt;Nested Prop 4&lt;/h3&gt;
  
     &lt;span&gt;Deep Nest Prop 1:&lt;/span&gt;
       &lt;select
         id="deep-nested-prop-1-selector"
         value={stateObject.top_level_prop[0].nestprop4[0].deepNestProp1}
         onChange={e =&gt; setStateObject({...stateObject, 
         top_level_prop[0].nestedProp4[0].deepNestProp1: e.target.value})}
       &gt;
        &lt;option value="deepNestVal1"&gt;deepNestVal1&lt;/option&gt;
        &lt;option value="deepNestVal2"&gt;deepNestVal2&lt;/option&gt;
        &lt;option value="deepNestVal3"&gt;deepNestVal3&lt;/option&gt;
       &lt;/select&gt;
  
  </code></pre>
  
  <p>The result of the code above gives me a "nestProp1" and "deepNestProp1" are undefined, presumably because they are never being reached/having their state changed by each selector. My expected output would be the selected option matching the value of whatever the selector's current val is (after the state changes).  Any help would be greatly appreciated.</p>