title: How to call setState in react with nested objects and unknown key
body: <p>My state looks like this
  </p>
  
  <pre><code>state = {
    basic: {
      entry: 'index.js',
      output: {
        path: 'dist',
        filename: 'bundle.js',
      }
    }
  }
  </code></pre>
  
  <p>I have defined a callback for input onChange event : </p>
  
  <pre class="lang-js prettyprint-override"><code>handleUpdateString = (e) =&gt; {
    const name = e.target.name
    const value = e.target.value
    this.setState({ [name]: value })
    console.log(this.state)
  }
  </code></pre>
  
  <p>say my input name is 'basic.entry'</p>
  
  <p>my state is updated, but instead of having <code>this.state.basic</code> be <code>{ entry: 'some value'}</code></p>
  
  <p>I end up with a new key in my state : <code>{ basic.entry: 'some value' }</code></p>
  
  <p>I have tried using <code>dot-object</code> to convert the dot-seperated string to a nested object, and passing this to <code>setState</code> but the state appears to be unchanged.</p>
  
  <p>What are simple solutions to this problem ?</p>