Material UI List using React.js

Last Updated : 08 Jul, 2022

Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. Material UI for React has this component available for us, and it is very easy to integrate. We can use the List Component in ReactJS using the following approach.

In this article, we will implement Material UI's List Component. We will create a list that will have some Geeks For Geeks Courses in it. We add more functionalities to that list like opening and closing a particular sublist.

Approach: First we will create a basic react app using some installations. We will make our new List Component reusing inbuilt list components with some styling using Material-UI. We are going to create a list that will have some Geeks For Geeks Courses in it. That list will be able to open and close by the List Header. Also, we will add a checkbox to show subitems of the list. On clicking the checkbox, the Sublist of GFG course details will also be shown accordingly. We will be using List, Collapse, and Checkbox components from Material UI. We will learn more about this while implementing it, now Let's start creating our List.

Creating React Application And Installing Module :

Step 1: Create a React application using the following command :

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the React.js application, install the material-UI modules using the following command.

npm install @material-ui/core
npm install @mui/icons-material
npm install @mui/material

Project Structure: Now create a new file Header.js in the folder named "src". Our header component will reside in this file. Now the new project structure will look like this :

Changing the project structure: In your project directory, create a file named ListComponent.js in the src folder. Now your new project structure will look like this :

Step 4: Create the component ListComponent.js which we will use to display the List. We can expand the list by adding list items to it. To add icon after the list item's name we used the ListItemIcon component and to give a name to the list item we used ListItemText. For opening and closing the child list we used the Collapse component. IconButton is just icons but with the additional effects of buttons. ListItemText has two fields related to display text i.e primary and secondary. Primary displays the primary text i.e. in our example GFG course name. The secondary is the secondary content to display like additional information about the list item, here GFG course list details.

ListComponent.js

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

// Importing material UI components
import List from "@material-ui/core/List";
import ListSubheader from "@material-ui/core/ListSubheader";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
import Grid from "@material-ui/core/Grid";
import IconButton from "@material-ui/core/IconButton";
import Avatar from "@material-ui/core/Avatar";
import Collapse from "@material-ui/core/Collapse";
import Checkbox from "@material-ui/core/Checkbox";

// Importing material UI icons
import InboxIcon from "@material-ui/icons/MoveToInbox";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";
import FolderIcon from "@material-ui/icons/Folder";
import DeleteIcon from "@material-ui/icons/Delete";

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

export default function ListComponent() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(true);
  const [secondary, setSecondary] = React.useState(false);
  const handleClick = () => {
    setOpen(!open);
  };
  return (
    <Grid item xs={12} md={6}>
      <div className={classes.demo}>
      {/* If checkbox is ticked then secondary text will be shown otherwise not */}
        <Checkbox
          checked={secondary}
          onChange={(event) => setSecondary(event.target.checked)}
        />
        <List
          component="nav"
          aria-labelledby="nested-list-subheader"
          subheader={
            <ListSubheader component="div" id="nested-list-subheader">
              mark the checkbox above to see sublist
            </ListSubheader>
          }
          className={classes.root}
        >
          <ListItem button onClick={handleClick}>
            <ListItemIcon>
              <InboxIcon />
            </ListItemIcon>
            <ListItemText primary="Open Geeks for Geeks Courses" />
            {/*code to open and closed list*/}
            {open ? <ExpandLess /> : <ExpandMore />} 
          </ListItem>
          <Collapse in={open} timeout="auto" unmountOnExit>
            {/*List item are wrapped inside List */}
            <List component="div" disablePadding> 
              <ListItem> {/* Single list item */}
                <ListItemAvatar>
                  <Avatar>
                    <FolderIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary="GFG Self-Paced Course"
                  secondary={
                    secondary ? "Structured premium video lectures" : null
                  }
                />
                <ListItemSecondaryAction>
                  {/*Inside the IconButton, we can render various icons*/}
                  <IconButton edge="end" aria-label="delete">
                    <DeleteIcon />
                  </IconButton>
                </ListItemSecondaryAction>
              </ListItem>
              <ListItem>
                <ListItemAvatar>
                  <Avatar>
                    <FolderIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary="Placement Preparation Course"

                   // if secondary variable state is true then show
                   // text otherwise null i.e. nothing will be shown
                  secondary={
                    secondary
                      ? "An interview-centric course designed to prepare
                        you for the role of SDE"
                      : null
                  }
                />
                <ListItemSecondaryAction>
                  <IconButton edge="end" aria-label="delete">
                    <DeleteIcon />
                  </IconButton>
                </ListItemSecondaryAction>
              </ListItem>
              <ListItem>
                <ListItemAvatar>
                  <Avatar>
                    <FolderIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary="Live Course"
                  secondary={
                    secondary
                      ? "Real Time Live Classes accessible from home"
                      : null
                  }
                />
                <ListItemSecondaryAction>
                  <IconButton edge="end" aria-label="delete">
                    <DeleteIcon />
                  </IconButton>
                </ListItemSecondaryAction>
              </ListItem>
            </List>
          </Collapse>
        </List>
      </div>
    </Grid>
  );
}

Step 5: After creating the ListComponent component, we will import it in App.js and make changes in App.js as follows.

App.js

import React from "react";
import ListComponent from "./ListComponent";

function App() {
  return (
    <div>
      {/* Use the newly created ListComponent component 
      in this main App component */}
      <ListComponent />
    </div>
  );
}
export default App;