title: SetState overwrites previous state even with spread operator React.JS
body: <p>I'm facing an issue with <code>setState</code> inside my <code>handleChange</code>.
  So here in code after clicking <code>addList</code> a <code>div</code> with <code>input</code> and <code>button</code> will appear, then when i type inside <code>input</code> the <code>input state</code> will update and after clicking Add button the <code>div</code> will disappear.
  so my problem is next time when clicking <code>addList</code> the value of previous input is still there and the <code>hideAddList handler</code> does not set the <code>input</code> state to empty and also when I type in the new opened <code>div</code> the previous <code>input state</code> will overwrite. even with indexing and spread operator its still same problem.</p>
  <p>what should I do?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class myClass extends Component {
      constructor(props) {
          super(props);
          this.state = {
              input: [{ title: '' }]
  
          };
          this.addList = this.addList.bind(this);
          this.hideAddList = this.hideAddList.bind(this);
          this.titleHandleChange = this.titleHandleChange.bind(this);
          
  
      }
      
      addList() {
         var x = document.getElementById("btn-list")
         var y = document.getElementById("add-button")
         x.style.display = 'none'
         y.style.display = ''
      }
  
      hideAddList() {
          var x = document.getElementById("btn-list")
          var y = document.getElementById("add-button")
          x.style.display = ''
          y.style.display = 'none';
          this.setState(prevState =&gt; ({ input: [...prevState.input, {title:''}]}))  
      }
       HandleChange(e, index){
         const { name, value } = e.target;
         const list = [...this.state.input];
         list[index][name] = value;
         this.setState({ input: list});
      }
      
     render() {
          return (
            &lt;div&gt;
            &lt;button id="btn-list" className="btn btn-default btn-list" type="submit" onClick={this.addList}&gt;Add Another List&lt;/button&gt;
                          {this.state.input.map((x, i) =&gt; {
                                  return (
                                      &lt;div key={i} id="add-button" className="add-button" style={{ display: "none" }}&gt;
                                          &lt;input id="input" type="text" onChange={(e) =&gt; {this.HandleChange(e, i)}} value={x.title} name="title" className="form-control add-input" /&gt;
                                          &lt;button className="btn btn-default btn-list-add" onClick={this.hideAddList} type="submit"&gt;Add&lt;/button&gt;
                                      &lt;/div&gt;
                                      )})}
            &lt;/div&gt;
          )
       }
          
  }
  
  export default myClass</code></pre>
  </div>
  </div>
  </p>