How to update the value from todo list : when click on update button value should get edited on text field and should get updated to same index

Question

React Todo list : I want to update the text when click on update button.when update button is clicked the value should get appeared on text field from where the text is added and again after editing the value,the value should get updated on same index after clicking on add button.

import React from 'react';

 class Todo extends React.Component{
    constructor(props){
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.handleClick= this.handleClick.bind(this);
        this.state={
            todoList:[],
            todoString:"",
            a:''

        }
    };
    onChange(event)
        {
        this.setState({todoString:event.target.value});

            }

    onSubmit()
    {

        let todoList =  this.state.todoList;
           let todoObject = {"todoText":this.state.todoString, "isDone": false, "isUpdated":false};
           todoList.push(todoObject); // todo-object is push in todolist
           this.setState({todoList:todoList,todoString:''});


    }
    handleClick(todoItem) {
        todoItem.isDone = true;

       this.setState({todoList:this.state.todoList});

    }
updatedClick(value) {

    this.setState({todoString: value.todoText});
}
   render()
   {
       return(
           <div>
            <div>{

            }
                <input  value={this.state.todoString} onChange={(e) => this.onChange(e)}/> <button  onClick={(e) =>this.onSubmit(e)}> Add </button>
                {
                    this.state.todoList.map((value, index) => {
                        return(
                            <div>


                                {value.isDone === true ? <span style={{'text-decoration':'line-through','padding':'10px'}}>{value.todoText}</span>: <span>{value.todoText}</span>}

                                <button  onClick={()=>this.handleClick(value)}> Mark Done</button>

                                <button  onClick={(e)=>this.updatedClick(value)}> update</button>

                            </div>



                        )
                    })
                }

            </div>
           </div>
       )
   }
}
export default Todo;

Answer 1

we have to use one extra property in state for insert/update mode. on update click we will set index for element that is going to be updated and if index is set and not equal to -1 then we are in edit mode else we use insert mode.

class Todo extends React.Component{
    constructor(props){
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
        this.handleClick= this.handleClick.bind(this);

        this.state={
            todoList:[],
            todoString:"",
            editIndex : -1 // init with insert mode.
        }
    };
    onChange(event) { this.setState({todoString:event.target.value}); }

    onSubmit() {
      let todoList = this.state.todoList;

      if(this.state.editIndex != -1) { // update mode
        todoList[this.state.editIndex].todoText = this.state.todoString;
      } else { // insert mode
        let todoObject = {"todoText" : this.state.todoString, "isDone": false, "isUpdated":false};
        todoList = [...todoList , todoObject];
      }

      this.setState({todoList:[...todoList] , todoString:'' , editIndex : -1 }); // reset insert mode
    }

    handleClick(todoItem) { // improved for toggling insted of only mark as done. 
      todoItem.isDone = !todoItem.isDone; 
      this.setState({todoList:[...this.state.todoList]}); 
    }

    updatedClick(value) { // set update mode
      let i = this.state.todoList.findIndex(l => {return l.todoText == value.todoText});
      this.setState({editIndex : i, todoString : value.todoText}); 
    }

   render()
   {
       return(
           <div>
            <div>
                <input  value={this.state.todoString} onChange={(e) => this.onChange(e)}/> <button  onClick={(e) =>this.onSubmit(e)}> Add </button>
                {
                    this.state.todoList.map((value, index) => {
                        return(
                            <div>
                                 { 
                                  value.isDone === true ? 
                                  <span style={{'text-decoration':'line-through','padding':'10px'}}>{value.todoText}</span> : 
                                  <span>{value.todoText}</span> }

                                <button  onClick={()=>this.handleClick(value)}> Toggle</button>

                                <button  onClick={(e)=>this.updatedClick(value)}> update</button>

                            </div>



                        )
                    })
                }

            </div>
           </div>
       )
   }
}
export default Todo;