React MUI Lists Display
Last Updated :
26 Dec, 2022
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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...