todolist.jsx

import cx from 'classnames';
import { Component } from 'react';

export default class TodoList extends Component {
    
    constructor(props){
         super(props);
         this.state={
             items:[],
             number_task_done:0,
             total_task:0,
             current_text:""
         }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleTaskClick = this.handleTaskClick.bind(this);

    }
    
     getItemTask(status, task_name){
        const class_name= ((status===1)?"is-done":"");
        return <li className="task" onClick={this.handleTaskClick}> 
             <p className={class_name} type="text">{task_name}</p>
        </li>
    }
   
       handleChange(event) {
        this.setState({current_text: event.target.value});
      }
       handleSubmit(event) 
       {
            this.appendNewTask(this.state.current_text)            
            event.preventDefault();
        }
        handleTaskClick(e){
            const target = e.target || e.srcElement;
            const text = target.textContent || target.innerText;   
            ///alert(text);
            var array=this.state.items;
            
            var i=0;
            for(i=0;i<array.length;i++)
             {
               
               if(array[i].name ===text)
               { 
                   if(array[i].status===1)
                   {
                      array[i].status=0;   
                   }
                   else
                      array[i].status=1;
                   this.setState({
                            number_task_done: (array[i].status===1)?this.state.number_task_done+1:this.state.number_task_done-1,
                            items: array,
                            current_text:""
                        });
               }
             }
  
        }
        
   
    appendNewTask(task){
        
        this.setState({
            total_task: this.state.total_task+1,
            items: [...this.state.items,{name:this.state.current_text, status:0}],
            current_text:""
        });
        
   
    
    }
   
    
    getAllTask(){
        
        const mapElement = this.state.items.map((item)=>{
            return this.getItemTask(item.status, item.name);////<li   onClick={this.handleTaskClick}>{item.name}</li>    
        });
        return mapElement;
    }
    
    
    render() {
        return (
            <>
                <div class="todoListContainer">
                    <h2>
                        Todo List
                    </h2>
                   <input type="text" value={this.state.current_text} onChange={this.handleChange}/>
                   <input type="button" value="Add" onClick={this.handleSubmit}/>
                   <p> {this.state.number_task_done} remaining out of {this.state.total_task} task</p>
                   <ul>
                    {this.getAllTask()}
                   </ul>
                </div>
                <style>{`
                    .is-done {
                        text-decoration: line-through;
                    }
                `}</style>
            </>
        );
    }
}