title: React Hooks useState() with Object
body: <p>What is the correct way of updating state, in a nested object, in React with Hooks?</p>
  <pre><code>export Example = () =&gt; {
    const [exampleState, setExampleState] = useState(
    {masterField: {
          fieldOne: &quot;a&quot;,
          fieldTwo: {
             fieldTwoOne: &quot;b&quot;
             fieldTwoTwo: &quot;c&quot;
             }
          }
     })
  </code></pre>
  <p>How would one use <code>setExampleState</code> to update <code>exampleState</code> to <code>a</code> (appending an field)?</p>
  <pre><code>const a = {
  masterField: {
          fieldOne: &quot;a&quot;,
          fieldTwo: {
             fieldTwoOne: &quot;b&quot;,
             fieldTwoTwo: &quot;c&quot;
             }
          },
    masterField2: {
          fieldOne: &quot;c&quot;,
          fieldTwo: {
             fieldTwoOne: &quot;d&quot;,
             fieldTwoTwo: &quot;e&quot;
             }
          },
     }
  }
  
  </code></pre>
  <p><code>b</code> (Changing values)?</p>
  <pre><code>const b = {masterField: {
          fieldOne: &quot;e&quot;,
          fieldTwo: {
             fieldTwoOne: &quot;f&quot;
             fieldTwoTwo: &quot;g&quot;
             }
          }
     })
  </code></pre>