Trying to check the box in the todoList in REACT

Question

I'm trying to make an event on todoList to check out the box, the event is called checkBox in my code, but I'm stuck and cannot figure it out. I'm very new to Javascript and React, could you please help me. I think there is something wrong here:

{this.state.itemList.map((item, index) => ( {item.todo}{item.completed} checkBox={this.checkBox} this.checkBox(item.completed)} />

))}

I cannot quite figure it out yet, here is my full code

import React, { Component } from 'react'

export default class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            todo:"",
            completed: "",
            itemList: [
                { todo: "Take out the Trash", completed: true },
                { todo: "Water the plants", completed: false },
                { todo: "Grocery shopping", completed: true } 
              ]
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.checkBox = this.checkBox(this)
    }
    handleChange(e) {
        this.setState({todo: e.target.value});
    }

    handleSubmit(n) {
       this.setState({
        itemList: [...this.state.itemList, {todo: this.state.todo, completed: false}], 
       });

    }

    checkBox(event) {
      this.setState(prev =>{
          const newList = prev.itemList.map(todo => {
              if (todo.event === todo) {
                todo.completed = !todo.completed
              }
              return todo
          })
          return {itemList: newList
          }
      }) 


    }

    render() {

        return (

            <div className="container">



                <div className="main">
                    <div>
                 <input className="header w-50 p-2" type="text" placeholder="enter task" value={this.state.todo} onChange={this.handleChange}/><br></br>

                 <button className="button btn-btn-primary ml-1 mt-3" onClick={this.handleSubmit}>Submit</button>
                 </div>
                 <div>
        {this.state.itemList.map((item, index) => (<p className="mt-4 list" key={index}>{item.todo}{item.completed} checkBox={this.checkBox} <input type="checkbox" onChange={()=>this.checkBox(item.completed)}/></p>))}

                 </div>
                 </div> 

                 </div>
        )
    }
}

Answer 1

You did not bind the checkBox function properly in the constructor, I fixed it below and commented where the issue was:

 constructor(props) {
        super(props)
        this.state = {
            todo:"",
            completed: "",
            itemList: [
                { todo: "Take out the Trash", completed: true },
                { todo: "Water the plants", completed: false },
                { todo: "Grocery shopping", completed: true } 
              ]
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.checkBox = this.checkBox.bind(this)// correctly bound function, instead of 'this.checkBox = this.checkBox(this)'
    }