In a functional component I want to access props inherited from the parent functional component. To get an idea what I mean, I have the following snippet:
function MainApp(props) {
const { classes } = props;
const [content, setContent] = useState("");
return (
<div className={classes.root}>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar className={classes.toolbar}>
<Typography variant="title" color="inherit" fontWeight="bold">
CashCo
</Typography>
<ToolbarActions className={classes.toolbarActions} />
</Toolbar>
</AppBar>
<main className={classes.appContent}>
<PageContent content={content} />
</main>
</div>
);
}
function App(props) {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<MainApp />}></Route>
</Routes>
</BrowserRouter>
);
}
I want to pass the props
argument in the App() function to the MainApp(), such that I don’t have to access properties like props.props.some_property
. How can I do that correctly? Cause passing props like this <MainApp props={props} />
means I have to access the properties like props.props.some_property
in MainApp(), that’s not what I want. I want to access the props like props.some_property
in MainApp().