How to add to a parent event handler in React - reactjs

Question

I have a React page setup root container page with a global Header component and some child components (via React Router, but that might not be relevant). The Header component has buttons that need to do specific things (like navigate) but also need to have functionality dictated by the child components. I have looked around for information on callbacks and props, but I am at a loss on how to achieve this. (Note, I am also using Redux but my understanding is that you should not save functions in Redux state because they are not serializable).
A simplified version of my scenario:
// Container Page
const Container = () => {
const onNavigate = () => {
// How could Cat or Dog component add extra functionality here before navigate() is called?
navigate('/complete');
};
return (
<Header onButtonClick={onNavigate}>
<Switch>
<Route path='/cats' component={Cat} />
<Route path='/dogs' component={Dog} />
</Switch>
);
}
// Cat component
const Cat = (props) => {
const speakBeforeNavigating = () => {
// This needs to happen when the "Navigate" button in the Header is clicked
console.log("Meow!");
};
return (
<span>It is a cat</span>
);
}

Answer 1

My recommendation is that you define all of the callbacks in the parent component, which is why I had to double check with you that the callbacks don't need to access the internal state of the child components.
I would define the props for each Route individually, and include a callback along with the props.
const ROUTES = [
{
path: "/cats",
component: Cat,
callback: () => console.log("Meow!")
},
{
path: "/dogs",
component: Dog,
callback: () => console.log("Woof!")
}
];
// Container Page
const Container = () => {
// functionality is based on the current page
const match = useRouteMatch();
// need history in order to navigate
const history = useHistory();
const onNavigate = () => {
// find the config for the current page
const currentRoute = ROUTES.find((route) => route.path === match.path);
// do the callback
currentRoute?.callback();
// navigate
history.push("/complete");
};
return (
<>
<Header onButtonClick={onNavigate} />
<Switch>
{ROUTES.map((props) => (
<Route key={props.path} {...props} />
))}
</Switch>
</>
);
};

Answer 2

You can use context api and send it as prop. While sending it as a prop you can pass callback function to your onNavigate function. Like this
const onNavigate = (callback) => {
callback();
navigate('/complete');
}
And you use it like this
<button onClick={() => onNavigate(() => console.log('blabla'))}
For context api information I recommend you to check React official documentation.