title: How to render different component onClick using React material-ui Drawer list?
body: <p>I am working on Dashboard design using <strong>React material-ui</strong> package. I have an App bar and a Drawer with a List of different items. When I click items in Drawer, I want to render the respective component inside the "<strong>main</strong>" tag of Drawer. </p>
  
  <p>The App.js component is class-based. And I have functional component for all other routes and features. </p>
  
  <pre><code>import React, { useState } from "react";
  import { makeStyles, useTheme } from '@material-ui/core/styles';
  import { Link } from 'react-router-dom'
  import { useAuthState } from '../contexts/AuthContext';
  import InboxIcon from '@material-ui/icons/MoveToInbox';
  import DraftsIcon from '@material-ui/icons/Drafts';
  
  import {MenuItem, MenuList, ListItemIcon, ListItemText
          , Drawer, ListItem, List, Divider, CssBaseline
          , Paper, IconButton, Typography, AppBar, Toolbar
          , Button, Input } from '@material-ui/core';
  
  const drawerWidth = 200;
  
  const useStyles = makeStyles(theme =&gt; ({
      root: {
        display: 'flex',
      },
      appBar: {
          width: `calc(100% - ${drawerWidth}px)`,
          marginLeft: drawerWidth,
      },
      menuButton: {
        marginRight: theme.spacing(2),
        fontSize: "16px",
        color: "#fff",
      },
      hide: {
          display: 'none',
      },
      drawer: {
          width: drawerWidth,
          flexShrink: 0,
      },
      drawerPaper: {
          width: drawerWidth,
      },
      toolbar: theme.mixins.toolbar,
  
      content: {
          flexGrow: 1,
          backgroundColor: theme.palette.background.default,
          padding: theme.spacing(3),
      },
  
      title: {
          flexGrow: 1,
          fontSize: "18px",
      },
      LinkBar: {
  
      },
      SideBarFont: {
          fontSize: "14px",
      },
  }));
  
  
  export default function Dashboard(props) {
      const classes = useStyles();
      const theme = useTheme();
      const { setUser } = useAuthState();
      const [open, setOpen] = React.useState(false);
  
      return (
          &lt;div className={classes.root}&gt;
              &lt;CssBaseline /&gt;
              &lt;AppBar 
                  className={classes.appBar}
                  position="fixed"
              &gt;
                  &lt;Toolbar&gt;
                      &lt;Typography variant="h6" className={classes.title} noWrap&gt;
                          Dashboard
                      &lt;/Typography&gt;
  
                      &lt;Button color="inherit"&gt;Logout&lt;/Button&gt;
  
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
  
              &lt;Drawer
                  className={classes.drawer}
                  variant="permanent"
                  anchor="left"
                  classes={{
                      paper: classes.drawerPaper,
                  }}
                  &gt;
                  &lt;div className={classes.toolbar} /&gt;
                  &lt;Divider /&gt;
  
                  &lt;List component="nav" aria-label="main mailbox folders"&gt;
                      &lt;ListItem button&gt;
                          &lt;ListItemIcon&gt;
                              &lt;InboxIcon /&gt;
                          &lt;/ListItemIcon&gt;
  
                          &lt;ListItemText disableTypography className={classes.SideBarFont} primary="User" /&gt;
                      &lt;/ListItem&gt;
                      &lt;ListItem button&gt;
                          &lt;ListItemIcon&gt;
                              &lt;DraftsIcon /&gt;
                          &lt;/ListItemIcon&gt;
  
                          &lt;ListItemText disableTypography className={classes.SideBarFont}  primary="Account" /&gt;
                      &lt;/ListItem&gt;
  
                      &lt;ListItem button&gt;
                          &lt;ListItemIcon&gt;
                              &lt;DraftsIcon /&gt;
                          &lt;/ListItemIcon&gt;
  
                          &lt;ListItemText disableTypography className={classes.SideBarFont}  primary="Customer Support" /&gt;
                      &lt;/ListItem&gt;
  
                      &lt;ListItem component={Link} to="/inventory" button&gt;
                          &lt;ListItemIcon&gt;
                              &lt;DraftsIcon /&gt;
                          &lt;/ListItemIcon&gt;
  
                          &lt;ListItemText disableTypography className={classes.SideBarFont}  primary="Inventory" /&gt;
                      &lt;/ListItem&gt;
                  &lt;/List&gt;
  
              &lt;/Drawer&gt;
  
              &lt;main className={classes.content}&gt;
                  &lt;div className={classes.toolbar} /&gt;
                  &lt;h1&gt;Hello&lt;/h1&gt;
                  &lt;Typography paragraph&gt;
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                      ut labore et dolore magna aliqua. Rhoncus dolor purus non enim praesent elementum
                  &lt;/Typography&gt;
  
              &lt;/main&gt;           
  
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>I have functional components for Users, Inventory, CustomerSupport, Account in their respective jsx files. How can i render  or  inside "<strong>main</strong>" when the user click on Drawer List items?</p>
  
  <p>See below for the UI. I want to render where Hello is rendered.</p>
  
  <p><a href="https://i.stack.imgur.com/zYwxx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zYwxx.png" alt="enter image description here"></a></p>