title: How to convert a div to input and then the input into div (onclick)
body: <p>I have 5 names and on clicking them, they convert to an input with a save button. On clicking save, the input and save disappear and the old div should show up with the update input value. I am not able to update the old div with the input value. Please help.</p>
  
  <blockquote>
    <p>Now I want to click on save and get the original div back in it's place with the updated input value. I am almost at the end but stuck. </p>
  </blockquote>
  
  <p><strong>Initially it looks like this:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/RmXzp.png" alt="1"></p>
  
  <p><strong>On clicking the div, it looks like this:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/TMkFz.png" alt="2"></p>
  
  <blockquote>
    <p>Please help and give a detailed explanation so that I can understand how to go about it from the next time.</p>
  </blockquote>
  
  <p><strong>Parent Component</strong></p>
  
  <pre><code>  state = {
      showNames : false,
      userNames: [],
      value: []
    }
  
    componentDidMount = () =&gt; {
      const {names} = this.props;
      const updatedNames = names.map((name) =&gt; ({...name, ...{isEditable: false}})); 
      this.setState({
        userNames: updatedNames
      })
    }
  
   inputNamesHandler = (namesIndex) =&gt; {
      const {userNames} = this.state;
      const updatedUserNameDetails = [...userNames];
      updatedUserNameDetails[namesIndex].isEditable = true;
      this.setState({userNames: updatedUserNameDetails})
    }
  
    saveButton = (inputValue, index) =&gt; {
      alert(inputValue + ' was clicked');
      alert(inputValue);
      alert(index);  
    }
  
    render() {
        return &lt;div&gt;
            &lt;h1&gt;Hello&lt;/h1&gt;
            &lt;div&gt;
                {this.state.userNames.map((nameDetails, index) =&gt; {
                    if(nameDetails.isEditable) {
                      return (&lt;div&gt;&lt;TextArea clicked={(name) =&gt; this.saveButton(name, index)}/&gt;&lt;/div&gt;);
                    } else {
                      return &lt;div onClick={() =&gt; this.inputNamesHandler(index)} style={styles.namesContainer}&gt;
                      &lt;div style={styles.firstMargin}&gt;&lt;FirstName firstName={nameDetails.firstName}&gt;&lt;/FirstName&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;LastName lastName={nameDetails.lastName}&gt;&lt;/LastName&gt;&lt;/div&gt;
                      &lt;/div&gt;
                    }
                })}        
            &lt;/div&gt; 
            &lt;/div&gt;     
      }
  }
  </code></pre>
  
  <p><strong>Child Component</strong></p>
  
  <pre><code>export default class TextArea extends Component {
      constructor(props) {
          super(props);
          this.state = {value:''}
  
          this.handleChange = this.handleChange.bind(this);
          // this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      handleChange(event) {
          this.setState({value: event.target.value});
      }
  
      render() {
          console.log('Textarea was rendered')
          return (
              &lt;div&gt;
                  &lt;div style={styles.inputContainer}&gt;
                  &lt;input type="text" style={styles.textField} value={this.state.value} onChange={this.handleChange}&gt;&lt;/input&gt;
                  &lt;button type="submit" style={styles.saveButton} onClick={() =&gt; this.props.clicked(this.state.value)}&gt;Save&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
  
      }
  }
  </code></pre>
  
  <p>The names are saved in another component which are being accessed using props. </p>