Adding a click handler to React children for methods on the child component

Solution 1:

There isn't any good way of doing this. You can use something like this. But, if you pass more than one child here, all of them will respond to this click handler! So, you should think of another logic to use this Button. As in this state, your ChildrenComponent is so generic.

So, what will your Button component do? You can create a component with this click handler and all other parts can be passed as props. Maybe in this way you can use it in multiple places.

const App = () => (
  <div>
    <ChildComponent>
      <button>Click</button>
    </ChildComponent>
  </div>
);

const ChildComponent = ( props ) => {
  const handleClick = () => console.log( "clicked" );
  return (
    <div>
      { React.cloneElement( props.children, { onClick: handleClick } ) }
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Adding a click handler to React children for methods on the child component

Solution 1:

Related

Recent Posts