title: Warning when changing controlled input value in React
body: <p>I'm making a little blog in React and I have a problem updating the state on input change event.</p>
  
  <p>The warning is:</p>
  
  <blockquote>
    <p>Warning: 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</p>
  </blockquote>
  
  <p>This is my code:</p>
  
  <p><strong>Constructor:</strong></p>
  
  <pre><code>constructor(props){
          super(props);
  
          this.state = {
              id: '',
              post: {
                  title: '',
                  slug: '',
                  content: ''
              }
          }
  
          this.handleChange = this.handleChange.bind(this);
  
      }
  </code></pre>
  
  <p><strong>handleChange function</strong></p>
  
  <pre><code>handleChange(event) {
          const target = event.target;
          const value = target.type === 'checkbox' ? target.checked : target.value;
          const name = target.name;
  
          this.setState({
              post: {
                  [name]: value
              }
          });
      }
  </code></pre>
  
  <p><strong>input render:</strong></p>
  
  <pre><code>render(){
          return (
              &lt;div&gt;
                  &lt;AdminMenu /&gt;
                  &lt;div id="admin-post-form"&gt;
                      &lt;div className="input-group vertical"&gt;
                          &lt;label&gt;Título&lt;/label&gt;
                          &lt;input
                              name="title"
                              placeholder="Título"
                              type="text"
                              value={this.state.post.title}
                              onChange={this.handleChange}
                          /&gt;
                      &lt;/div&gt;
                      &lt;div className="input-group vertical"&gt;
                          &lt;label&gt;Slug&lt;/label&gt;
                          &lt;input
                              name="slug"
                              placeholder="Slug"
                              type="text"
                              value={this.state.post.slug}
                              onChange={this.handleChange}
                          /&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>What's wrong with my code ? The field is updated, but I get that warning.</p>
  
  <p>Thanks!</p>