React MUI Lists Display

React 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 is a library of React UI components that implements Google’s Material Design. 

It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. 

There are different types of lists available in MUI React which are:

• Basic List: This is a simple list of items, which allows to display or perform actions using a specific item.
• Nested List: This is a list where an item in the list has another sub-list inside itself.
• Interactive List: This is a list that can change its appearance and behavior according to user requirements.

In this article, we will create a demo react application that will showcase a Nested list and a basic list with checkboxes.

Creating the Demo React Application:

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

npx create-react-app myapp

Step 2: After creating the app, move to its directory using the following command:

cd foldername

Step 3: Now install the material-UI modules using the following command.

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material
 

Project Structure: The Project directory will be looking like this after completing all the above steps:

Example 1: In this example, we will be creating a list of different categories of mail which will depict a sub-classification of inbox mail type using nested list format. The ExpandLess and ExpandMore are used to close and open the sub-list inside Inbox list item. When it is clicked the handleClick method expands or collapses the sub-list.

NestedList.js:

Javascript

import * as React from 'react';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import DraftsIcon from '@mui/icons-material/Drafts';
import SendIcon from '@mui/icons-material/Send';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';

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

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

    return (
        <List
            sx={{ width: '100%', maxWidth: 360,
                bgcolor: 'background.paper' }}
            component="nav"
            aria-labelledby="nested-list-subheader"
            subheader={
                <ListSubheader component="div"
                    id="nested-list-subheader">
                    Nested List Items
                </ListSubheader>
            }
        >
            <ListItemButton>
                <ListItemIcon>
                    <SendIcon />
                </ListItemIcon>
                <ListItemText primary="Sent mail" />
            </ListItemButton>
            <ListItemButton>
                <ListItemIcon>
                    <DraftsIcon />
                </ListItemIcon>
                <ListItemText primary="Drafts" />
            </ListItemButton>
            <ListItemButton onClick={handleClick}>
                <ListItemIcon>
                    <InboxIcon />
                </ListItemIcon>
                <ListItemText primary="Inbox" />
                {open ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>
            <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                    <ListItemButton sx={{ pl: 4 }}>
                        <ListItemIcon>
                            <StarBorder />
                        </ListItemIcon>
                        <ListItemText primary="Starred" />
                    </ListItemButton>
                    <ListItemButton sx={{ pl: 4 }}>
                        <ListItemIcon>
                            <StarBorder />
                        </ListItemIcon>
                        <ListItemText primary="UnRead" />
                    </ListItemButton>
                    <ListItemButton sx={{ pl: 4 }}>
                        <ListItemIcon>
                            <StarBorder />
                        </ListItemIcon>
                        <ListItemText primary="Read" />
                    </ListItemButton>
                </List>
            </Collapse>
        </List>
    );
}

After creating the creating our NestedList, we will import it in our base file App.js. Update the App.js file in the /src directory  with below code:

App.js:

Javascript

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

function App() {
    return (
        <div>
            <NestedList />
        </div>
    );
}
export default App;

Step to run the application: Open the terminal and type the following command to run the Application.

npm start

Output: Go To  http://localhost:3000/ and the following result will be displayed:

Nested List

Example 2: In this example, we will create a simple list with checkboxes that can store items that are selected by the user for a particular task. 

CheckBoxList.js

Javascript

import * as React from 'react';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Checkbox from '@mui/material/Checkbox';
import IconButton from '@mui/material/IconButton';
import CommentIcon from '@mui/icons-material/Comment';

export default function CheckBoxList() {
    const [checked, setChecked] = React.useState([0]);

    const handleToggle = (value) => () => {
        const currentIndex = checked.indexOf(value);
        const newChecked = [...checked];

        if (currentIndex === -1) {
            newChecked.push(value);
        } else {
            newChecked.splice(currentIndex, 1);
        }

        setChecked(newChecked);
    };

    return (
        <List sx={{ width: '100%', maxWidth: 360,
            bgcolor: 'background.paper' }}>
            {[0, 1, 2, 3].map((value) => {
                const labelId = `checkbox-list-label-${value}`;

                return (
                    <ListItem
                        key={value}
                        disablePadding
                    >
                        <ListItemButton role={undefined}
                            onClick={handleToggle(value)} dense>
                            <ListItemIcon>
                                <Checkbox
                                    edge="start"
                                    checked={
                                        checked.indexOf(value) !== -1}
                                    tabIndex={-1}
                                    disableRipple
                                    inputProps=
                                    {{ 'aria-labelledby': labelId }}
                                />
                            </ListItemIcon>
                            <ListItemText id={labelId}
                                primary={`List ${value + 1}`} />
                        </ListItemButton>
                    </ListItem>
                );
            })}
        </List>
    );
}

After creating our CheckBoxList, we will import it into our base file App.js. Update with the following code in App.js inside our /src directory to use our checkbox list.

App.js:

Javascript

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

function App() {
    return (
        <div>
            <CheckBoxList />
        </div>
    );
}
export default App;

Output: Go To  http://localhost:3000/ and the following result will be displayed:

CheckBox List

Reference: https://mui.com/material-ui/react-list/