1
\$\begingroup\$

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}>
    <Toolbar>
      <Typography variant="h6" noWrap>
        Dashboard
      </Typography>
    </Toolbar>
  </AppBar>
  <Drawer
    className={classes.drawer}
    variant="permanent"
    classes={{
      paper: classes.drawerPaper,
    }}
    anchor="left"
  >
    <div className={classes.toolbar} />
    <Divider />
    <List>
      {['Home', 'Favourites'].map((text, index) => (
        <ListItem button key={text} onClick={() => setPage(text)} selected={text==page}>
          <ListItemIcon>{pageMap[text]['icon']}</ListItemIcon>
          <ListItemText primary={text} />
        </ListItem>
      ))}
    </List>
    <Divider />
  </Drawer>

  <main className={classes.content}>
    <div className={classes.toolbar} />
    {pageMap[page]['component']}
  </main>
</div>
);
}
\$\endgroup\$
  • 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 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.