I made this simple tabbed app template and one thing in particular I am not sure about is my creation of a pageMap object. The thinking behind it is that you can add a new page to the app by adding an entry in the pageMap as well as the list being mapped to produce the tabs.

The components are from material-ui and for brevity I didn't include the imports / style boilerplate.

function App() {
const classes = useStyles();
const [page, setPage] = useState('Home')

const pageMap = {
'Home':  {'component': <Home />, 'icon': <HomeIcon /> }, 
'Favourites': {'component': <Favourites />, 'icon': <StarIcon /> },

return (
<div className={classes.root}>
  <CssBaseline />
  <AppBar position="fixed" className={classes.appBar}>
      <Typography variant="h6" noWrap>
      paper: classes.drawerPaper,
    <div className={classes.toolbar} />
    <Divider />
      {['Home', 'Favourites'].map((text, index) => (
        <ListItem button key={text} onClick={() => setPage(text)} selected={text==page}>
          <ListItemText primary={text} />
    <Divider />

  <main className={classes.content}>
    <div className={classes.toolbar} />
  • 1
    \$\begingroup\$ Welcome to Code Review! If there is any chance that what you consider as boilerplate could be useful for the review, include it or maybe provide a link to the full source (GitHub gist?). Code Review has a quite generous limit on how long a question can be. \$\endgroup\$ – AlexV Jun 24 '19 at 9:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.