title: Update Nested state in react
body: <p>Hello guys I'm trying to update the state of a nested object in react, I'm currently doing this:</p>
  
  <pre><code>handleChange({target: {id, value}}, type) {
      this.setState(
          state =&gt; ({
              dwelling: (Object.assign(state.dwelling, {[id]: {[type]: value}}))
          })
      );
  }
  </code></pre>
  
  <p>it comes from a formgroup:</p>
  
  <pre><code>&lt;FormGroup controlId="spaces"&gt;
      &lt;ControlLabel&gt;Dormitorios&lt;/ControlLabel&gt;
      &lt;FormControl
          componentClass="select"
          value={dwelling.spaces.dorms}
          placeholder="Seleccione"
          onChange={e =&gt; this.handleChange(e, 'dorms')}
      &gt;
  </code></pre>
  
  <p>The problem is when I update the state of the sub object <code>dwelling.spaces.dorms</code> is created but when I try to place another property it replaces the old one instead of getting added: </p>
  
  <p>Before <code>Dwelling</code>:</p>
  
  <pre><code>{
     address: "",
     currency: "",
     price: 0,
     publicationType: "",
     spaces: {
       closets: "",
       dorms: "",
       pools: ""
     },
     subtype: "",
     type: ""
  }
  </code></pre>
  
  <p>After onChange for <code>dwelling.spaces.dorms</code></p>
  
  <pre><code>{
     address: "",
     currency: "",
     price: 0,
     publicationType: "",
     spaces: {
       dorms: "3",
     },
     subtype: "",
     type: ""
  }
  </code></pre>
  
  <p>After onChange for <code>dwelling.spaces.closets</code></p>
  
  <pre><code>{
     address: "",
     currency: "",
     price: 0,
     publicationType: "",
     spaces: {
       closets: "3",
     },
     subtype: "",
     type: ""
  }
  </code></pre>