React.cloneElement onClick does not work?

Hi. Im trying to add an onClick handler to an already existing element.

Example:

render() {
    let element = <ImageCardView title="Test" subtitle="Subtitle" />;
    return React.cloneElement(element, { onClick: function() { console.log("TEST"); }});
}

// Result: Nothing happens when i click on the element

When setting it directly in the <ImageCardView /> it works.

[ccorcos]

Why is this closed?

[abriginets]

Wow I’m so surprised this issue existed for so long without a clear explanation. Let me fill this gap for those who are going to search for it in the future. TLDR, it invokes props directly on your component, not the JSX you render

Let’s say we have a parent component:

export function ParentComponent(props) {
  return (
    <Wrapper>
      {React.cloneElement(
        props.children,
        {
           onClick: () => console.log('click'),
        },
      )}
    </Wrapper>
  );
}

And a child component:

export function ChildComponent(props) {
  return <button />;
}

And then we render it as following:

return (
  <ParentComponent>
    <ChildComponent />
  </ParentComponent>
);

What’s happening with child component is that React.cloneElement only adds onClick function to the list of props you are passing down to child prop. It does not invoke this prop in the JSX you declare. The solution here is as simple as it can be - just add onClick handler to the component you render:

export function ChildComponent(props) {
  return <button onClick={props.onClick} />;
}

It’s just the way our brain is messing with us and React have nothing to do with not handling clicks on your component 😃