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/
