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>
  );

Answer 1

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>
  );
};