javascript - handleClick ''TypeError: undefined has no properties'' can't find what's undefined

Question

I'm trying to delete a row in the backend by clicking on the button wich sends the _id of the row to be deleted, but I get this error pointing to the line of the button. I can't understand what this 'undefined' refers to, what am I missing?

  34 | {
  35 | todos && todos.map((todo) => ([
  36 |   <p key={todo._id} >{todo.content}</p>,
> 37 |   <button key={i++}  id="del"  onClick={() => {this.handleClick(todo._id)}}/>
  38 | ]
  39 | ))
  40 | }

My handleClick is as follows:

useEffect(() => {
const handleClick = (todo_id) => {
  const delTodo = async () => {
    const del = await Axios.delete('http://localhost:3001/todo/' + todo_id)
    .then(() => {
      console.log('deletado!!')
    })
  }
}
}, [])

question from:https://stackoverflow.com/questions/65949452/handleclick-typeerror-undefined-has-no-properties-cant-find-whats-undefin

Answer 1

use handleClick instead of this.handleClick.Because functional component not have this. And also declare the function handleClick outSide the useEffect not necessary to use inside

updated

You are declare do many function . just remove delTodo function and add async to handleClick

 const handleClick = async (todo_id) => {
    const del = await Axios.delete('http://localhost:3001/todo/' + todo_id)
    .then(() => {
      console.log('deletado!!')
    })
 }

<button key={i++}  id="del"  onClick={() => {handleClick(todo._id)}}/>