React "Uncaught TypeError: ontoggle is not a function" exception when a function from pare-CodePudding

I've been trying a tutorial video in YouTube named React JS Crash Course 2021 and i have created a TaskCheckbox component for a Task component. TaskCheckbox component has a function "ontoggle" and an id:number passed in as constructor parameters. It is only supposed to call the function in App.js when HTML event "onClick" fires and console.log the id for now.

The hierarchy is as following: App => Tasks => Task => TaskCheckbox

Even though i am pretty sure i passed the right functions to its child for each component i am unable to locate the reason of the exception: "Uncaught TypeError: ontoggle is not a function"

App.js snippet:

const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id))
  }

const taskSelectHandler = (e, id) => {
    console.log(id)
    //setTasks(tasks.map(task => task.id === id ? task.selected = e.target.checked : ""))
  }
return (
    <div className='main'>
      <div className = "container">
        <Header className="header-title" title="TASK TRACKER" />
        <section className='tasks-outer-container'>
          {tasks.length > 0 ? 
            <Tasks tasks={tasks} ondelete={deleteTask} ontoggle={taskSelectHandler}/>
          :
          <p className="info-text">Go set some tasks!  </p>  
          }
        </section>
      </div>
    </div>
  )
}

Tasks.js snippet:

const Tasks = ({tasks, ondelete, ontoggle}) =>{
    return (
        <div className='tasks-container'>
            {
                tasks.map((task) => (
                <Task key={task.id} task={task} ondelete={ondelete} ontoggle={ontoggle}/>)
                )
            }
        </div>
    )
}

Tasks.propTypes = {
    tasks: PropTypes.array,
    ondelete: PropTypes.func.isRequired,
    ontoggle: PropTypes.func.isRequired,
}

export default Tasks

Task.js snippet:

const Tasks = ({tasks, ondelete, ontoggle}) =>{
    return (
        <div className='tasks-container'>
            {
                tasks.map((task) => (
                <Task key={task.id} task={task} ondelete={ondelete} ontoggle={ontoggle}/>)
                )
            }
        </div>
    )
}

Tasks.propTypes = {
    tasks: PropTypes.array,
    ondelete: PropTypes.func.isRequired,
    ontoggle: PropTypes.func.isRequired,
}

export default Tasks

TaskCheckbox snippet:

const TaskCheckbox = (ontoggle, id) => {
    return (
        <div className="task-checkbox-container">
            <input className="task-checkbox" onClick={(e) => ontoggle(e, id) } type="checkbox"></input>
        </div>
    )   
}

TaskCheckbox.propTypes = {
    ontoggle: PropTypes.func.isRequired,
    id : PropTypes.number.isRequired,
}

export default TaskCheckbox

This part was around 59:00 in the video if that helps, although I took a little bit different approach than in the video by creating a TaskCheckbox component for Task component.

Another thing that bugs me is that the "ondelete" function in the Task component is set in a similar way yet it does not cause any issue, I cannot see any difference that could cause this exception.

CodePudding user response：

You forgot destructuring parentheses in TaskCheckbox component. Change const TaskCheckbox = (ontoggle, id) => {} to const TaskCheckbox = ({ontoggle, id}) => {}