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

Question

I understand passing a method down as a prop from a parent to child component. For some reason I'm having a hard time wrapping my head around accessing a child components methods from props.children.

Hopefully my pseudo-code will make sense.

// ParentComponent
...
<ChildComponent>
  <button onClick={myMethod}></button>
</ChildComponent>
...


// ChildComponent
...
myMethod() {
  dosomething...
}

render() {
  return (
    <div>
      {this.props.children}
    </div>
  )
}
...

So in this example, I want to access 'myMethod' from a button that I pass to React children. In my real world problem, the button was originally in the render method of childComponent, but I wanted more flexibility. I think it can be done with refs, but I dont think thats the best way to do it, or if what I'm doing is even the right way to go about it. Much thanks!

Answer 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>