1👍
✅
Button callback is immediately invoked upon rendering.
<button onClick={deleteTodo(todo.id)}>delete</button>
Should be called in a callback handler function.
<button onClick={() => deleteTodo(todo.id)}>delete</button>
Or make deleteTodo
a curried function so it’s immediately invoked and closes over the passed id
value and returns a function to be called when button is clicked.
const deleteTodo = (id) => () => {
console.log(id);
fetch(`http://localhost:8000/api/delete/${id}/`, {
method: "DELETE",
headers: {
"Content-Type": "application/json"
},
})
};
...
<button onClick={deleteTodo(todo.id)}>delete</button>
Source:stackexchange.com