title: Dynamically spread setState doesn't work on ternary operator spread
body: <p>I have a nested state like this:</p>
  
  <pre><code>this.state = {
    fields: {
      subject: '',
      from: {
        name: '',
      },
    },
  };
  </code></pre>
  
  <p>In an <code>onChange</code> function I'm handling updates to these nested values. </p>
  
  <p>I'm trying to build a dynamically spread <code>setState()</code> for deep nests using dot notation.</p>
  
  <p>For instance, with the array: <code>const tree = ['fields','subject']</code> I'm able to update the <code>subject</code> state value with:</p>
  
  <pre><code>this.setState(prevState =&gt; ({
    [tree[0]]: {
      ...prevState[tree[0]],
      ...(tree[2] ? {
        ...prevState[tree[1]],
        [tree[2]]: value
      } 
      : { [tree[1]]: value })
    },
  }));
  </code></pre>
  
  <p>Since the ternary operator is ending on <code>{ [tree[1]]: value }</code></p>
  
  <p>But when my <code>tree</code> array is: <code>const tree = ['fields','from','name']</code> the state value for <code>fields.from.name</code> is not changing, where it should be resolving to the first part of the ternary operator:</p>
  
  <pre><code>{
    ...prevState[tree[1]],
    [tree[2]]: value
  }
  </code></pre>
  
  <p>Am I missing something?</p>