title: Why is my React show/hide label not updating correctly?
body: <p>The label is editable: When click on the label, input text field will be shown and label field is hidden. After the text field has lost focus, the label field will be shown and text field will be hidden. I am having issue where label does not update with the new text input value.    </p>
  
  <p>The add component button will create a new component and place it on top of the list. Having issue where the newly created component is place below the list which has input text shown and label hidden. </p>
  
  <p>After added multiple new components, when I click on one of the label, the text field is automatically updated with other text. I have tried to debug it but cannot resolve it. </p>
  
  <pre><code>import React from 'react';  
  import FontAwesome from 'react-fontawesome'; 
  
  export default class Dynamic extends React.Component {
    constructor() {
      super(); 
      this.state = { 
        arr: [],
        text:"LABEL",
        saveDisabled: true, 
        editing: []
      };
    }
  
    handleSort(sortedArray) {
      this.setState({
        arr: sortedArray
      });
    }
  
    save(){  
    }
  
    closePopup() { 
    }
  
    handleAddElement() { 
      this.textInput.value : 'LABEL';
      this.state.arr.unshift('LABEL');
  
      this.setState({ 
        saveDisabled: false,
      });   
    }
  
    handleRemoveElement(index) {
      const newArr = this.state.arr.slice();
      newArr.splice(index, 1);
  
      this.setState({
        arr: newArr,
        saveDisabled: false
      });
    }
  
    changeLabel(index){     
      this.setState({ 
        saveDisabled: false 
      });
      console.log(index);
      this.state.editing[index] = true;
      console.log("changelabel");
    }
  
    textChanged(index) {
      console.log("txtval: "+this.textInput.value);
      this.setState({ text: this.textInput.value});
      this.state.arr[index] = this.textInput.value;
       this.setState({
         arr: arr
       });
      console.log(this.state.arr);
    }
  
    inputLostFocus(index) { 
      this.state.editing[index] = false;
    }
  
    keyPressed(event) {
      if(event.key == 'Enter') {
        this.inputLostFocus();
      }
      this.inputLostFocus();
      console.log("key");
    }
  
    render() {
      function renderItem(num, index) {
  
          return ( 
            &lt;DemoItem  className="dynamic-item" &gt; 
                &lt;FontAwesome className='th' name='  th' onClick={this.handleRemoveElement.bind(this, index)}/&gt;
                &lt;div name="name" className={(index==0)||this.state.editing[index] ? "hideElement": "displayElement"} onClick={this.changeLabel.bind(this,index)}&gt;{this.state.arr[index]}&lt;/div&gt;
                &lt;input autofocus name="name" type="text" className={(index==0)||this.state.editing[index] ? "displayElement": "hideElement"} onChange={this.textChanged.bind(this, index)} onBlur={this.inputLostFocus.bind(this,index)}
                onKeyPress={this.keyPressed.bind(this,index)} defaultValue={this.state.arr[index]} ref={(input) =&gt; {this.textInput = input;}} /&gt;  
                &lt;FontAwesome className='trash-o' name='trash-o' onClick={this.handleRemoveElement.bind(this, index)}/&gt;
           &lt;/DemoItem&gt;
          ) 
      } 
  
      return ( 
        &lt;div className="demo-container"&gt;
          &lt;div className="dynamic-demo"&gt;
            &lt;h2 className="demo-title"&gt;
              Tasks
              &lt;button disabled={this.state.saveDisabled} onClick={::this.save}&gt;Save&lt;/button&gt;
              &lt;button onClick={::this.handleAddElement}&gt;Add Component&lt;/button&gt;
            &lt;/h2&gt;
            &lt;Sortable className="vertical-container" direction="vertical" dynamic&gt;
              {this.state.arr.map(renderItem, this)}   
            &lt;/Sortable&gt; 
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  displayElement {
    display: inline;
  }
  .hideElement{
    display: none;
  }  
  </code></pre>