Expanding Nested List Components in Material-UI using ReactJS by utilizing the URL structure

Question

Expanding Nested List Components in Material-UI using ReactJS by utilizing the URL structure

I'm currently working with ReactJS and Material-UI. Is there a way to have the MUI nested list display specific items based on the URL? For example, if a user is on /inbox/starred/, I want the Inbox item to be open and Starred to be highlighted. I attempted to use React Router Nested Routes but couldn't quite get it right.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import ListSubheader from '@material-ui/core/ListSubheader';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import Collapse from '@material-ui/core/Collapse';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import DraftsIcon from '@material-ui/icons/Drafts';
import SendIcon from '@material-ui/icons/Send';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import StarBorder from '@material-ui/icons/StarBorder';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
  nested: {
    paddingLeft: theme.spacing(4),
  },
}));

export default function NestedList() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <List
      component="nav"
      aria-labelledby="nested-list-subheader"
      subheader={
        <ListSubheader component="div" id="nested-list-subheader">
          Nested List Items
        </ListSubheader>
      }
      className={classes.root}
    >
      <ListItem button>
        <ListItemIcon>
          <SendIcon />
        </ListItemIcon>
        <ListItemText primary="Sent mail" />
      </ListItem>
      <ListItem button>
        <ListItemIcon>
          <DraftsIcon />
        </ListItemIcon>
        <ListItemText primary="Drafts" />
      </ListItem>
      <ListItem button onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItem button className={classes.nested}>
            <ListItemIcon>
              <StarBorder />
            </ListItemIcon>
            <ListItemText primary="Starred" />
          </ListItem>
        </List>
      </Collapse>
    </List>
  );
}

reactjs routes material-ui nested-lists

Answer 1

Answer №1

To tackle this assignment, my suggestion is to utilize the URL parameter feature of react-router.

Initially, you will have to modify your route to something similar to this structure:

<Route path="/:drawer/:subDrawer" children={<NestedList />} />

Note the presence of :drawer and :subDrawer variables in the aforementioned path. These will help us identify our current route.

Subsequently, within your component, access the values of drawer and subDrawer from the URL parameters as demonstrated below (certain details are omitted for clarity):

// ...other imports
import { useParams } from 'react-router-dom';

export default function NestedList() {
  const classes = useStyles();
  
  const { drawer, subDrawer } = useParams();
  
  return (
    <List>
      {//... other stuff}

      <ListItem button onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox" />
        {// modified logic here}
        {drawer === 'inbox' ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          {// modified logic here}
          <ListItem
            selected={subDrawer === 'starred'}
            button className={classes.nested}
          >
            <ListItemIcon>
              <StarBorder />
            </ListItemIcon>
            <ListItemText primary="Starred" />
          </ListItem>
        </List>
      </Collapse>
    </List>
  );
}

Given that we rely on the route to determine the open drawer, it is essential to update the onClick event for each menu item to redirect the user to the correct route. For instance, when a user selects Sent mail, they should be redirected to /sent-mail and the corresponding button for Sent mail would resemble this:

      <ListItem button selected={subDrawer === 'sent-item'}>
        <ListItemIcon>
          <SendIcon />
        </ListItemIcon>
        <ListItemText primary="Sent mail" />
      </ListItem>

and so forth...

Answer 2

To tackle this assignment, my suggestion is to utilize the URL parameter feature of react-router.

Initially, you will have to modify your route to something similar to this structure:

<Route path="/:drawer/:subDrawer" children={<NestedList />} />

Note the presence of :drawer and :subDrawer variables in the aforementioned path. These will help us identify our current route.

Subsequently, within your component, access the values of drawer and subDrawer from the URL parameters as demonstrated below (certain details are omitted for clarity):

// ...other imports
import { useParams } from 'react-router-dom';

export default function NestedList() {
  const classes = useStyles();
  
  const { drawer, subDrawer } = useParams();
  
  return (
    <List>
      {//... other stuff}

      <ListItem button onClick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Inbox" />
        {// modified logic here}
        {drawer === 'inbox' ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          {// modified logic here}
          <ListItem
            selected={subDrawer === 'starred'}
            button className={classes.nested}
          >
            <ListItemIcon>
              <StarBorder />
            </ListItemIcon>
            <ListItemText primary="Starred" />
          </ListItem>
        </List>
      </Collapse>
    </List>
  );
}

Given that we rely on the route to determine the open drawer, it is essential to update the onClick event for each menu item to redirect the user to the correct route. For instance, when a user selects Sent mail, they should be redirected to /sent-mail and the corresponding button for Sent mail would resemble this:

      <ListItem button selected={subDrawer === 'sent-item'}>
        <ListItemIcon>
          <SendIcon />
        </ListItemIcon>
        <ListItemText primary="Sent mail" />
      </ListItem>

and so forth...

Expanding Nested List Components in Material-UI using ReactJS by utilizing the URL structure

Answer №1

Similar questions

Can you explain the purpose of the component prop in a Grid layout?

An issue arises when trying to import the modal popup

Crafting a custom look for your TextField with MaterialUI

Utilizing Formik alongside Yup and React-select for enhanced validation

I keep running into errors whenever I try to run npm install in my React JS project. The only way for me to successfully install dependencies is by using npm install --force. How can I go about resolving these

Sending user input from search component to main App.js in React

Leveraging PapaParse for CSV file parsing in a React application with JavaScript

Activate the useEffect function in react

What is the best way to organize an Express application that handles both API requests and views?

Begin with a blank canvas and wait for inspiration to shape your journey

Unable to edit the current value of an input component in ReactJS

Tips for styling buttons in react-admin with custom CSS

Encountering a problem while trying to run the command `npm run build`, receiving an error stating `TypeError: MiniCssExtractPlugin is not a

Modifying the Inactive Tab Color in Material UI

ReactDOM fails to display the application, even after successfully compiling

What could be causing html-webpack-inline-source-plugin to prevent the page from refreshing after editing CSS files?

ReactStrap: Difficulty concealing navbar item based on screen dimensions

Front-end displaying empty data fields on my webpage

I encountered a SyntaxError while parsing JSON due to an absence of a number after a minus sign at position 1

Deployment to DigitalOcean fails due to GitHub action error