I have an header component that is used in 2 other components wrapping them everytime with the same code. Is there a logic that can be implemented to wrap them and use that code only one?
export default function SameCodeToWrapComponent1() {
. . .
return (
<ThemeProvider theme={appTheme}>
<div className={classes.root}>
<CssBaseline />
<AppBar >
<Toolbar className={classes.toolbar}>
...
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<MyComponent1 />
</Paper>
</Grid>
</Grid>
</Container>
</main>
</div>
</ThemeProvider>
);
}
And in another component I use
export default function SameCodeToWrapComponent2() {
. . .
return (
<ThemeProvider theme={appTheme}>
<div className={classes.root}>
<CssBaseline />
<AppBar >
<Toolbar className={classes.toolbar}>
...
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
<MyComponent2/>
</Paper>
</Grid>
</Grid>
</Container>
</main>
</div>
</ThemeProvider>
);
}
As you can see both call MyComponent1 and MyComponent2 at a certain point but are the same part of code in 2 different components
yes, you should make a Wrapper component & use its children prop to render content inside it. this is called component composition & there's a famous article in react website about it here. your wrapper component would look like this:
const Wrapper = ({ children }) => {
return (
<ThemeProvider theme={appTheme}>
<div className={classes.root}>
<CssBaseline />
<AppBar>
<Toolbar className={classes.toolbar}>...</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
{children}
</Paper>
</Grid>
</Grid>
</Container>
</main>
</div>
</ThemeProvider>
);
};
then you would use it like this:
const AnyComponent = () => {
return <Wrapper>Your non-reusable content goes here</Wrapper>
}
try this:
export default function SameCodeToWrapComponent1({ customComponent }) {
. . .
return (
<ThemeProvider theme={appTheme}>
<div className={classes.root}>
<CssBaseline />
<AppBar >
<Toolbar className={classes.toolbar}>
...
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Paper className={classes.paper}>
{customComponent}
</Paper>
</Grid>
</Grid>
</Container>
</main>
</div>
</ThemeProvider>
);
}
You pass this customComponent property and that way you can add a custom component (the property name you can change)
Then you call your component and pass the children you want to add.
In this way:
<SameCodeToWrapComponent1 customComponent={<MyComponent />} />