Editing entered text on double click using react
<p>I made Todo app using react. On clicking enter the todo gets added in array, then on click on entered todo the todo gets stricked-off. Now i am facing problem to edit the entered todo. I want when i double click the entered todo, it converts into editing mode and then i can edit the todo n save it on enter keypress. My code goes like this:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    class App extends React.Component {

  

constructor(){

    super();
    this.state={
      todo:[]
    };
  };
  
  entertodo(keypress){
    var Todo=this.refs.inputodo.value;
    if( keypress.charCode == 13 )
  
    {
      this.setState({
        todo: this.state.todo.concat({Value:Todo, checked:false, editing:false})
      });
      this.refs.inputodo.value=null;
    };
  };
  todo(todo,i){
    return (
      &lt;li className={todo.checked===true? 'line':'newtodo'}&gt;
        &lt;div onClick={this.todoCompleted.bind(this, i)}&gt;
          &lt;input type="checkbox" className="option-input checkbox" checked={todo.checked} /&gt;
          &lt;div key={todo.id}  className="item"&gt;
            {todo.Value}
            &lt;span className="destroy" onClick={this.remove.bind(this, i)}&gt;X&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    );
  };
  
  remove(i){
    this.state.todo.splice(i,1)
    this.setState({todo:this.state.todo})
  };
  todoCompleted(i){
     var todo=this.state.todo;
     todo[i].checked =todo[i].checked? false:true;
       this.setState({
         todo:this.state.todo
       });
  
   };
  allCompleted=()=&gt;{
    var todo = this.state.todo;
    var _this = this
    todo.forEach(function(item) {
      item.className = _this.state.finished ? "newtodo" : "line"
      item.checked = !_this.state.finished
    })
    this.setState({todo: todo, finished: !this.state.finished})
  };
    render() {
    return (
        &lt;div&gt;
          &lt;h1 id='heading'&gt;todos&lt;/h1&gt;
          &lt;div className="lines"&gt;&lt;/div&gt;
          &lt;div&gt;
            &lt;input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/&gt;
            &lt;span onClick={this.allCompleted}id="all"&gt;^&lt;/span&gt;
          &lt;/div&gt;
          &lt;div className="mainapp"&gt;
            &lt;ul className="decor"&gt;
              {this.state.todo.map(this.todo.bind(this))}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
     

 

ReactDOM.render(&lt;App/&gt;,document.getElementById('app'));</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>    .line {
  text-decoration: line-through;
  color: red;
}
.newtodo{
  text-decoration: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"&gt;&lt;/script&gt;
&lt;div id="app"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>