React how to: replace only one component on click (dynamic UI) - html

Question

Using react.js I want to make a dynamic UI, I have something like this:
<div>
<appbar component />
<drawer (sidebar) comopnent /> <!-- <--has buttons -->
<content component> <!-- <-- component to replace or re-render -->
<footer component>
</div>
Then I try to use an state to save and change the "" like this:
const [renderView, setRenderView] = useState("<Home />");
/* onclick call this function and pass referenced component ej: <reports /> */
function changeContent(view){
setRenderView(view);
return(
<Suspense fallback={renderLoader()}>
{view}
</Suspense>
);
}
Now, how to replace the " content component " with the new one?.
Thanks for your comments.

Answer 1

i made this bassed on suggestions, its working, but im not using class just functions
function Dashboard(props) {
/* lazy loading */
const renderLoader = () => <p>Loading...!?¡?</p>;
/* lazy components */
const Initial = () => (
<Suspense fallback={renderLoader()}>
<InitialComponent />
</Suspense>
)
const Reports = () => (
<Suspense fallback={renderLoader()}>
<ReportsComponent />
</Suspense>
)
const Cards = () => (
<Suspense fallback={renderLoader()}>
<CardsComponent />
</Suspense>
)
/* set view state */
const [renderView, setRenderView] = useState(Initial());
function changeContent(view){
setRenderView(view);
}
const test = (cosa) => {
console.log(cosa);
}
/* style things*/
const classes = useStyles();
const fixedHeightPaper = clsx(classes.paper, classes.fixedHeight);
return (
<div className={classes.root}>
<CssBaseline />
<UIappbar />
<UIsidebar />
<main className="contentWrapper">
<Grid container spacing={3}>
<Grid item xs={12} md={8} lg={9}>
<div>
<Button onClick={() => changeContent(Reports())}>Reports view</Button>
</div>
<div>
<Button onClick={() => changeContent(Cards())}>Cards view</Button>
</div>
</Grid>
<Grid item xs={12} md={8} lg={9}>
<Paper className={fixedHeightPaper}>
{renderView}
</Paper>
</Grid>
</Grid>
</main>
</div>
);
}
Now i need to call "changeContent()" that has the method to change {renderView} need to call it from a child
dont know how to pass props without class format (im using functions only)
should i change to class with constructor format?