score:0
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>
</>
);
};
score:0
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.
Source: stackoverflow.com
Related Query
- How to add to a parent event handler in React
- How to add arguments to event handler in ES6 React when functions are bound in constructor
- How to add input text event handler in react
- How to render child element in parent element from event handler in react js
- How to add scroll event in react component
- How can I add onKeyPress event to react material-ui textfield?
- How can I add a click handler to BODY from within a React component?
- How to set event handler in React sub-component
- How to unit test a react event handler that contains history.push using Jest and Enzyme?
- How to pass an event handler to a child component in React
- How to add Event in React Functional Component
- How to add click event with React createElement
- How to override event handler function of child component from parent component in react.js
- React - How to Pass an Argument to an Event Handler
- Is it too expensive to add and remove event listeners on every call of my React custom hook? How to avoid it?
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How do I programaticly navigate to a route from an event handler in React Router 4.0?
- how to write inline js event handler code in the react component using "this"
- React delegate normal event handler to document, how about a binded function?
- How does placing an event handler in an anonymous function in React fix bind issues?
- Calling an event handler defined in parent from child component in React
- ReactJS V16 How to pass parent function to grandchild event handler
- How to trigger an event in Parent Component from Child Component onClick() using React Hooks?
- React Router v6, How to place <Link /> into a button and event handler
- Can I add a React input event handler only on certain conditions?
- How Can i Add Event Handlers In Reusable React Component Created from Object Array
- How to add event listener to the div element accessed with ref using react and typescript?
- how to add function on event onclick on array.map in react js
- React dynamically add html element with event handler
- How to add two functions passed as props to an onChange event in React and Material UI?
More Query from same tag
- React Handling component onClick (one opens, but another closes)
- Onclick function only works when I Click twice
- find sum of amount for group of list
- jsx-control-statements - ReferenceError: Choose is not defined
- how to change the asterisk color in required * field
- Next.js form components wont allow to be edited once I give a value
- convert mySQL BLOB to HTML file in NodeJS/Reactjs
- Download a PDF file in Node and redirect into front end React
- React-Table returning remaining items after filtering?
- Using graphql-tools, apollo-link-schema, and react-hooks always returning undefined when mocking
- How to reuse webpack bundle in another bundle?
- Javascript class: What's the difference between public fields and fields
- JS: What do the curly braces inside function parameter declarations mean?
- How do I create select filters for my material-ui table in a reusable way?
- Clear values modal ReactJS
- Getting data from another class to main screen in react js and redux
- Relay/GraphQL Schema cache not updating when I update schema on server side
- Mocking clientHeight and scrollHeight in React + Enzyme for test
- Why does setting the allowfullscreen attribute of an iframe doesn't seem to keep the attribute
- React-Router not correctly rendering Styled-Components Styles
- Jest encountered an unexpected token in typescript
- State change not being reflected
- react router dom is not updating class component when url change
- how to put data in single line for 2 header tags html
- eslint rule for preferring React Class Component syntax
- graphql fails at adiing 100+ products to my Wordpress Woocomerce store
- How to use conditionals in React with CssModules
- React route with coreui - can't get any props
- trying to figure out out to turn this from a component to a function in ReactJS but i'm stuck
- Django rest-auth Token authentication