title: React.js - TODO List edit button not working
body: <p>I am new to React.js and trying to create a TODO list. I have two buttons for edit and delete. Delete button is working fine, but not the edit button. I am having a hard time with Edit button. When I click on the edit button, I want the text box to be editable. Then I can edit and when I enter, it should be updated.</p>
  
  <p>I have some css issue with button alignments too. Please help me with this.</p>
  
  <p><a href="https://i.stack.imgur.com/YiQWq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YiQWq.jpg" alt="enter image description here"></a></p>
  
  <p>App.js</p>
  
  <hr>
  
  <pre><code>import React from 'react';
  import './App.css';
  import './AddedTasks.css'
  import uuid from 'uuid'
  
  class App extends React.Component{
  
     constructor(props){
      super(props);
      this.state = {
          task:[],
          currentTask:{
              text:'',
              key:''
          }
      }
      this.addTask = this.addTask.bind(this);
      this.editTask = this.editTask.bind(this);
      this.deleteTask = this.deleteTask.bind(this);
      this.handleInput = this.handleInput.bind(this);
  }
  addTask(event){
      event.preventDefault();
      const newItem = this.state.currentTask;
      if(newItem.text !==""){
          const items = [...this.state.task, newItem];
          this.setState({
              task: items,
              currentTask:{
                  text:'',
                  key:''
              },
          })
      }
  }
  editTask(text,key) {
      //console.log("items:"+this.state.task);
       const items = this.state.task;
       items.map(item=&gt;{
           if(item.key===key){
               //console.log(item.key +"    "+key)
               // item.text= text.title;
           }
       })
       this.setState({
           task: items,
       })
  }
  deleteTask(key){
      const currentTaskArray = [...this.state.task]
      const taskAfterDeleted = currentTaskArray.filter(deletedTask =&gt; deletedTask.key !== key);
      this.setState({
          task:taskAfterDeleted
      })
  }
  handleInput(event){
      this.setState({
          currentTask:{
              text: event.target.value,
              key: uuid()
          }
      })
  }
  render(){
    return(
        &lt;div className='Todo'&gt;
            &lt;h1&gt; MyTaskList &lt;/h1&gt;
            &lt;form id="todo-list" onSubmit={this.addTask}&gt;
                &lt;input type="text" className="textInput" placeholder="Enter Item" value={this.state.currentTask.text} onChange={this.handleInput}/&gt;
                &lt;button type ="submit"&gt;Add&lt;/button&gt;
            &lt;/form&gt;
            {this.state.task.map(oneTask=&gt;(
                &lt;div className="card"&gt;
                    &lt;div className="container"&gt;
                        &lt;p&gt;{oneTask.text}
                          &lt;div&gt;
                              &lt;button className="w3-button delete" onClick={()=&gt; this.deleteTask(oneTask.key)}&gt;&lt;i className="fa fa-trash"/&gt;&lt;/button&gt;
                                &lt;button className="w3-button edit" onClick={(edit)=&gt;this.editTask(edit.target.value,oneTask.key)}&gt;&lt;i className="glyphicon glyphicon-pencil"/&gt;&lt;/button&gt;
                          &lt;/div&gt;
                        &lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            ))}
        &lt;/div&gt;
      );
     }
    }
    export default App;
  
  
    App.css
   _______________
  
  body{
   background-color: lightblue;
   background-image: url("./todolist.jpg");
   background-repeat: no-repeat;
   background-size: cover;
   alignment: center;
   padding-top: 40px;
  }
   h1{
      text-align: center;
      color: #bf6318;
      padding-right: 17px;
  }
  .Todo{
      background-color: #c1b2cd;
      min-height: 500px;
      width: 500px;
      margin: 150px;
      padding-left: 20px;
      background-image: url("./pin.jpg");
      background-size: 80px;
      background-repeat: no-repeat;
    }
    #todo-list input{
        background-color: rgb(95, 83, 135);
        border: 0;
        width: 250px;
        height: 50px;
        padding: 0 20px;
        margin: 20px;
        font-size: 18px;
        border-radius: 10px;
        color: #ffffff;
     }
     #todo-list input::placeholder{
        color: rgba(255,255,255,0.5);
     }
     button{
         background-color: #008CBA;
         border: none;
         color: white;
         padding: 15px 32px;
         text-align: center;
         text-decoration: none;
         display: inline-block;
         font-size: 16px;
         margin: 4px 2px;
         cursor: pointer;
        -webkit-transition-duration: 0.4s; /* Safari */
         transition-duration: 0.4s;
         box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
     }
  
  
    AddedTask.cs
    _________________
  
  
    .card {
       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
       transition: 0.3s;
       width: 70%;
       border-radius: 5px;
       margin-bottom: 10px;
       margin-left: 20px;
       background-color: #bf826b;
    }
    .card:hover {
       box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }
    .container {
       padding: 4px 16px;   /*input/card field*/
       height: 40px;
    }
   .container button.edit{
        color: #bf6318;
        margin-left: 80px;
        margin-right: 10px;
    }
    .container button.delete{
  
     }
  </code></pre>