React : How to trigger a function on the "onClick" event, but on a component?

Question

I try to trigger the handleClick function when i click on my Trash component, but it doesn't work because Trash is not a DOM object. How can i trigger my function when i click on this component ?

const handleClick = () => {
    console.log('OK');
  }

  return (
    <div className="comment">
      {trash && <Trash comment={comment} onClick={handleClick} />
    </div>
  );

I'm not sure I understand. Whatever the "Trash" component is needs to have something in it that's clickable and calls the handler. — Dave Newton
– Dave Newton, Commented Nov 6, 2021 at 15:24
Can you share the Trash component? Without that code, we can't understand why handleClick isn't being called. — Jake Worth
– Jake Worth, Commented Nov 6, 2021 at 16:01

CertainPerformance · Accepted Answer · 2021-11-06 15:23:50Z

2

You'll need to change your Trash component to accept an onClick prop, and to pass it down to the returned JSX. Something like:

const Trash = (props) => {
  // ...
  return (
    // whatever the top level element here is,
    // add the onclick prop to it
    <div onClick={props.onClick}>
      // ...
    </div>
  );
};

answered Nov 6, 2021 at 15:23

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React : How to trigger a function on the "onClick" event, but on a component?

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