can not add a onClick event in reactjs

Question

I'm new in reactjs. I'm trying to add a onClick event in my child component like:

## BlogList.js
<button onClick={handleDelete(blog.id)}>delete</button>

the handleDelete function in the parent component is:

## Home.js
    const handleDelete = (id) => {
        const newBlogs = blogs.filter((blog) => blog.id !== id)
        setBlogs(newBlogs)
    }

The error message is: Cannot update a component (Home) while rendering a different component (BlogList). To locate the bad setState() call inside BlogList

Why didn't it work? Why did it have to write like <button onClick={()=>handleDelete(blog.id)}>delete</button> ?

You can pass it like onClick={handleDelete} in-case you don't want to pass any params. But if you want to pass in params inside the function you have to use that syntax onClick={()=>handleDelete(blog.id)}. On the first approach I mentioned you are simply passing in all the events associated with that button — kazmi066
– kazmi066, Commented Dec 17, 2022 at 4:27

Nick Vu · Accepted Answer · 2022-12-17 04:33:03Z

<button onClick={handleDelete(blog.id)}>delete</button>

The above code means you execute the function right away after JSX renderings.

You can check the below code to understand immediate function execution

function handleDelete(id) {
  console.log('Executed handleDelete')
}

handleDelete() //executed immediately with `()`!

To avoid that case, you should remove () like below

function handleDelete(id) {
  console.log('Executed handleDelete')
}

handleDelete //nothing happens!

Similarly, in React, you can avoid that case by introduce a wrapper

function handleDelete(id) {
  console.log('Executed handleDelete')
}

const onClick = () => handleDelete(1)

And then call it's like below

//logic
function handleDelete(id) {
   console.log('Executed handleDelete')
}

const onClick = () => handleDelete(1)

...

//JSX

<button onClick={onClick}>delete</button>

Collectives™ on Stack Overflow

can not add a onClick event in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related