title: Editable Table data and updating state in React
body: <p>I rendereed the table as per the input given from the form, my concern is to make the table row editable and on editing , I mean onChange() the name should store in the this.state.</p>
  <p>So here is my App.js file,</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import Form from &quot;./Form&quot;;
  export default class App extends Component {
    state = {
      names: [
        /*
          Object structure
            {id: 1,name:'Aashiq'}
        */
      ]
    };
  
    handleNameChange(e) {
      this.setState(
        {
          names: { ...this.state.names, name: e.target.value }
        },
        console.log(this.state.names)
      );
    }
  
    renderTable() {
      return this.state.names
        .sort((a, b) =&gt; a.id - b.id)
        .map((eachName) =&gt; {
          const { id, name } = eachName;
          return (
            &lt;tr key={id}&gt;
              &lt;td&gt;{id}&lt;/td&gt;
              &lt;td onChange={(e) =&gt; this.handleNameChange(e)}&gt;
                &lt;div contentEditable&gt;{name}&lt;/div&gt;{&quot; &quot;}
              &lt;/td&gt;
              &lt;td&gt;
                &lt;input
                  type=&quot;button&quot;
                  value=&quot;Delete&quot;
                  onClick={() =&gt; this.deleteName(eachName.id)}
                /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          );
        });
    }
  
    deleteName = (id) =&gt; {
      this.state.names &amp;&amp;
        this.setState({
          names: this.state.names.filter((name) =&gt; name.id !== id)
        });
    };
  
    addName = (newName) =&gt; {
      this.setState((currentState) =&gt; {
        const newNames = [...currentState.names];
        newNames.push(newName);
        return {
          names: newNames
        };
      });
    };
  
    render() {
      return (
        &lt;&gt;
          &lt;Form onSubmit={this.addName} names={this.state.names} /&gt;
          &lt;br /&gt;
          &lt;table id=&quot;details&quot;&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th&gt;ID&lt;/th&gt;
                &lt;th&gt;Names&lt;/th&gt;
                &lt;th&gt;Operation&lt;/th&gt;
              &lt;/tr&gt;
              {this.renderTable()}
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/&gt;
      );
    }
  }
  </code></pre>
  <p>You can see here ,I've tried to use contentEditable attribute inside the div, but its not reflecting on using any handler functions ,so It will be good some one come up with a solution ,btw I need to edit only the name field.</p>
  <p><a href="https://i.stack.imgur.com/uuxDg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uuxDg.png" alt="The Browser output" /></a></p>