score:6
you can build a recursive wrapper component that replaces any children it has and wraps its children in the same way. the replacement will continue recursively until child elements have no more children.
here's an example of such a component. it substitutes <p>
elements with <span>
elements.
const recursivewrapper = props => {
const wrappedchildren = react.children.map(
props.children,
child => {
const type = child.type === 'p' ? 'span' : child.type
if (child.props && child.props.children) {
return react.cloneelement(
{
...child,
type // substitute original type
},
{
...child.props,
// wrap grandchildren too
children: (
<recursivewrapper>
{child.props.children}
</recursivewrapper>
)
}
)
}
return child
}
)
return (
<react.fragment>
{wrappedchildren}
</react.fragment>
)
}
you can use the same general idea to inject additional props as well.
Source: stackoverflow.com
Related Query
- Updating state with props on React child component
- Accessing React component children props from the parent
- If the props for a child component are unchanged, does React still re-render it?
- Typing a React component that clones its children to add extra props in TypeScript
- React Typescript how send props and use it in child component
- React passing additional classNames to child component in addition to other props
- Adding a click handler to React children for methods on the child component
- Pass two children as props to a React component
- React - replace child component in props.children
- es6 react getting props in child component
- How to load child component with props on first render with React Hooks
- Pass props to a child component in React
- Updating Child Component Via Change of Props from Parent in React
- React child component not rendering props from parent value
- React TS Generic component to pass generic props to children
- React TS - How to pass props from a parent component to a deeply nested child
- React - Axios/Fetch/Ajax request after new props passed to child component
- Why child component didnt get parent's props with Axios in React
- How do i render multiple props in a single component and then pass those props to a child component in React
- React Redux: Connected child component not receiving props
- no argument props method does not get called from child component in react
- Props are not passing from parent to child components in React Functional component
- React Js how to handle props in child component
- Send a Video element as props to child component React
- React child component not updating when props change
- React - Mapped array not passing props correctly to child component
- Passing child component class as props to parent component in React
- React passing props from const to child component
- What's the redux-react way to manipulate props in react children component
- React children component is not re-rendered after props from parent changed
More Query from same tag
- API pagination in React
- Comparison of Multiple Conditions Using Filters in React TypeScript
- webpack get source file not transpiled on browser
- Submitting redux form values
- how to pass data from one page to another page in Next.js?
- How to render and map an object using a variable as a key in react
- question on code snippet useEffect with fetching state
- How to style my react select when it is disabled (in CSS)?
- render view after a post request in react/redux
- React img tag issue with url and class
- create scrollable section in antd 4
- Merging state with object from loop react
- Redux saga perform multiple HTTP requests
- How to setup global variables in apollo-client
- Javascript / ReactJS Objects not copying as expected
- How to change the domain name on a local deployed React app
- electron sending data from ipcMain to ipcRender
- Module not found on SVG files in react
- Passing data to parent component in react
- How does Augmentation work in React?
- Reading environmental variables set in configmap of kubernetes pod from react application?
- How To Make MaterialUI Mini-Varient Drawer Reponsive
- How to communicate between sibling components in React
- not able to pass value to parent component react
- Can I conserve the default this by using Function.bind ? If no, why?
- Render a component from outside ReactJS
- react conditional component rendering
- Testing React Components setState overload which takes a function
- context parameter is empty on getServerSideProps when page refresh
- Generating a dynamic /robots.txt file in a Next.js app