title: React - Change a JSON Object in setState
body: <p>I have a form with three fields, the <strong>handleChange</strong> method works in the first field (DateOfBirth) but not in the (Id1) and (Id2) fields.</p>
  
  <p>For some reason <strong>setState</strong> return this error when i try to change the value of the (Id1||Id2) fields.</p>
  
  <p><strong><em>"A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component"</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Form extends React.Component {
  
      constructor(props){
          super(props);
          this.state = { DateOfBirth:'1990-01-24', Metadata: {Id1:'33813518109', Id2:'John Doe'}}
          this.handleChange = this.handleChange.bind(this);
      }
  
      handleChange(event) { 
          const target = event.target;
          const name = target.name;        
          var value = target.value;         
  
          if(name === "Id1" || name === "Id2")            
              this.setState({Metadata:{[name]: value}});     
          else
              this.setState({[name]: value});
      }  
  
      render() { 
          return (             
              &lt;div&gt;
                  &lt;form onSubmit={this.handleSubmit}&gt;                                          
                      &lt;input name="DateOfBirth" type="date" onChange={this.handleChange} value={this.state.DateOfBirth} /&gt;                                           
                      &lt;input name="Id1" type="text" onChange={this.handleChange} value={this.state.Metadata.Id1} /&gt;   
                      &lt;input name="Id2" type="text" onChange={this.handleChange} value={this.state.Metadata.Id2} /&gt;
                  &lt;/form&gt;
              &lt;/div&gt;            
          );
      }
  }
  
  export default Form;
  </code></pre>