How to Delete individual items from list in react

manpreet Best Answer 2 years ago

I have built a simple ToDo App. Rending the tasks from the form input is working fine, but I am unable to delete the tasks when clicked on Delete button.

export class TodoList extends Component {
  constructor(props) {
    super(props)

    this.state = {
        task:'',
        items:[]
    }
  }
  onChangeHandler=(e)=>{
    this.setState({
        [e.target.name]: e.target.value
    })
  }
  addItem=(e)=>{
    e.preventDefault()
    if (this.state.task!==""){
    this.setState({
        items:[...this.state.items,this.state.task],
        task:''
    })
  }
  }
  removeItem=(index)=>{
    const remainingItems = this.state.items.filter(j => {
      return j !== index
    })
    this.setState({
      items: remainingItems
    })
  };

  render() {
    return (
      <div>
        <form>
            <input type='text' name="task"onChange={this.onChangeHandler} value={this.state.task} placeholder='Enter Task'/>
            <button type='submit' onClick={this.addItem}>Add Taskbutton>
        form>
        <Lists items={this.state.items}
                delete={this.removeItem}/>
      div>
    )
  }
}





export class Lists extends Component {

  removeItems=(index)=>{
    this.props.delete(index)
  }

  render() {
    return (
      <div>
        {this.props
                                                

                                                                                                        REPLY
                                                    
                                                
                                                


                                                    

                                                        
                                                            0
                                                            views 

                                                            0
                                                                likes 
                                                            
                                                            

                                                            0
                                                            shares

                                                            


    

         Facebook
        
         Twitter
        
        
         Linked In 
        
          WhatsApp