I'm trying to modify a child component existing within a function component.
Let's say this is the original Table function component I would like to render in my own CustomizedTable function component. Since the Table function component is beautifully designed, I don't want to modify the entire function or structure. What I hope to achieve is to customize and replace the existing Body component
const Table = (props) => {
return (
<Context props={props}>
<Container className={props.className} style={props.style}>
<Header />
<Body
ColumnComponents={ColumnData}
RowComponents={RowData}
/>
<Footer />
</Container>
</Context>
);
});
How do I find and replace the <Body/> component with <CustomizedBody> that is nested within the Table function component? Is there a way to modify it without touching the existing <Body>?
import { Table } from './Table';
const CustomizedBody = (props) => {
return (
<Body>
// Body Add Ons
</Body>
)}
export const CustomizedTable = (props) => {
return (
<Table Body={<CustomizedBody>}>
</Table>
)}