title: React error when removing input component
body: <p>I am not sure if it´s a react issue or not but I am struggling a lot with this issue. I tried to create just a simple example to post out of my project:</p>
  
  <p><a href="https://codepen.io/as3script/pen/VMbNdz?editors=1111" rel="nofollow noreferrer">https://codepen.io/as3script/pen/VMbNdz?editors=1111</a></p>
  
  <p>There are four buttons on the example.</p>
  
  <p>To reproduce the problem press each of the first three buttons to create a text input from and enter a value. For example enter 100 into the first one, 200 into the second and 300 into the third. Now press the fourth button to remove the first input.</p>
  
  <p>It should keep the second and third with their respective values, 200 and 300, but instead it´s showing 100 in the second and 200 in the third.</p>
  
  <hr>
  
  <p>This code is the same as it is on CodePen, it just didn't allow the link to be posted without this.</p>
  
  <pre><code>class ButtonComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {filtersArr:[]}
      this.addButtons = this.addButtons.bind(this);
      this.removeButtons = this.removeButtons.bind(this);
      this.getInput = this.getInput.bind(this);
      this.onChangeHandler = this.onChangeHandler.bind(this);
    }
  
     addButtons(e){     
      let tempArr = this.state.filtersArr;
  
      tempArr.push({comp:this.getInput(e.target.id), id:e.target.id});
  
      this.setState({filtersArr:tempArr});
    }
  
    removeButtons(e){
      console.log(e.target.id);
      let newArr = this.state.filtersArr.filter((filter)=&gt;{
        return (filter.id !=='FirstButton')
      })
      this.setState({filtersArr:newArr});
    }
  
    onChangeHandler(e){
      console.log(e.target.value);
    }
  
    getInput(id){
      return (
        &lt;div&gt;
          &lt;h6&gt;{id}&lt;/h6&gt;
          &lt;input
            id="min"
            type="text"
            placeholder="min"
            onChange={this.onChangeHandler}/&gt;
        &lt;/div&gt;
      )
    }
  
    render() {
      let styles = {
        display:'inline-block'
      }
  
      return (
        &lt;div&gt;
          &lt;p&gt;Add three buttons and enter the number in each input, and remove amt.&lt;/p&gt;
          &lt;button id="FirstButton" onClick={this.addButtons}&gt;FirstButton&lt;/button&gt;
          &lt;button id="SecondButton" onClick={this.addButtons}&gt;SecondButton&lt;/button&gt;
          &lt;button id="ThirdButton" onClick={this.addButtons}&gt;ThirdButton&lt;/button&gt;
  
          &lt;button id="FirstButton" onClick={this.removeButtons}&gt;Remove firstButton&lt;/button&gt;
  
            &lt;ul&gt;
              {this.state.filtersArr.map((filter, index)=&gt;{
                return &lt;li style={styles} key={index}&gt;{filter.comp}&lt;/li&gt;
              })
              }
            &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(
    &lt;ButtonComponent/&gt;,
    document.getElementById('root')
  );
  </code></pre>