firing a function that is in the parent component from a React.CreatePortal component

Question

I have a parent component that has a button, when clicked, opens a new component inside a React.CreatePortal control.

On that CreatePortal component, I have a button like this:

return (
        ReactDOM.createPortal(
            <div id="portal_Game">
            <div><button onClick={jump}> JUMP </button></div>

But the 'jump' function is on the parent control.

In the portal, it's not recognized.

Is there a way to fire the 'jump' on the parent from the portal?

Thanks!

Answer 1

Pass the jump function as a prop to the child component like this:

In the parent component pass the jump function:

...
<Child jump={jump} />
...

You can use the function in the child component via props:

...
<button onClick={props.jump}> JUMP </button>
...