How to use List Component in ReactJS? Last Updated : 22 Nov, 2023 Comments Improve Suggest changes Like Article Like Report Lists are continuous, vertical indexes of text or images. 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. Prerequisites:NodeJS or NPMReactJSSteps to Create the React Application And Installing Module:Step 1: Create a React application using the following command. npx create-react-app foldernameStep 2: After creating your project folder i.e. foldername, move to it using the following command. cd foldernameStep 3: After creating the ReactJS application, Install the material-ui modules using the following command. npm install @material-ui/corenpm install @material-ui/iconsProject Structure: Project StructureThe updated dependencies in package.json file will look like: "dependencies": { "@material-ui/core": "^4.12.4", "@material-ui/icons": "^4.11.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4", }Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code. JavaScript import React from 'react'; import ListItemAvatar from '@material-ui/core/ListItemAvatar'; import ListItemText from '@material-ui/core/ListItemText'; import Avatar from '@material-ui/core/Avatar'; import WorkIcon from '@material-ui/icons/Work'; import ListItem from '@material-ui/core/ListItem'; import ImageIcon from '@material-ui/icons/Image'; import List from '@material-ui/core/List'; export default function App() { return ( <div style={{ display: 'block', padding: 30 }}> <h4>How to use List Component in ReactJS?</h4> <List> <ListItem> <ListItemAvatar> <Avatar><ImageIcon /></Avatar> </ListItemAvatar> <ListItemText primary="Photos" secondary="Photos Icon" /> </ListItem> <ListItem> <ListItemAvatar> <Avatar><WorkIcon /></Avatar> </ListItemAvatar> <ListItemText primary="Work" secondary="Work Icon" /> </ListItem> </List> </div> ); } Step to Run Application: Run the application using the following command from the root directory of the project. npm startOutput: Now open your browser and go to http://localhost:3000 Comment More infoAdvertise with us Next Article How to use List Component in ReactJS? gouravhammad Follow Improve Article Tags : JavaScript Web Technologies ReactJS Material-UI React-Questions +1 More Similar Reads How to use Icon Component in React JS? Every application requires icons for UI purposes, and integrating them with Material UI for React is seamless. Utilize the Icon Component in ReactJS effortlessly by following this straightforward approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to create React Application And Installing 2 min read How to use Pagination Component in ReactJS ? Pagination is a feature through which users can easily switch between pages across a website or app. With the help of this component, a user can select a specific page from a range of pages. Material UI for React has this component available for us, and it is very easy to integrate. We can use the f 2 min read How to use XGrid Component in ReactJS ? An XGrid Component is a Commercial version of the MaterialUI Component. It provided more enhanced features over the community DataGrid Component like column resizing, column reordering, pagination over 100 rows, etc. A DataGrid Component helps in displaying the information in a grid-like format of r 3 min read How to use Divider Component in ReactJS? A divider is a thin line that groups content in lists and layouts. To use Diveder Component in React JS we can either create one or we can also import it from other UI libraries like Bootstrap, MaterialUI, etc. PrerequisitesReact JSMaterial UINode.js and NPMTable of Content Creating Divider componen 3 min read How to use DataGrid Component in ReactJS ? A DataGrid Component helps in displaying the information in a grid-like format of rows and columns. Material UI for React has this component available for us, and it is very easy to integrate. We can use the following approach in ReactJS to use DataGrid Component.Creating React Application And Insta 2 min read How to use map() to Create Lists in ReactJS ? The map function is generally used to render the list items dynamically in react. This function iterates over the array and each iteration returns the JSX for respective item. It helps to render and display the list efficiently. Prerequisites:React JSJavaScript Array.mapApproachTo create and render 2 min read How to Map Data into Components using ReactJS? Mapping data in react js component is a comman practice to render the lists and repeating elements. In this article, we will have a users data and we will map it to react components to display the users information in the react appPrerequisites:React JSNodejs and npmJavaScript Array mapApproachTo ma 3 min read How to create components in ReactJS ? Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS. Table of Content React Functional C 3 min read How to use Pagination in DataGrid Component in ReactJS ? Pagination helps in viewing a segment of data from the assigned data source. Pagination improves the user experience as users can switch between pages to see data. DataGrid Component helps in displaying the information in a grid-like format of rows and columns. We can use the following approach in R 2 min read ReactJS UI Ant Design List Component Ant Design Library has this component pre-built, and it is very easy to integrate as well. List Component is used to display a simple list to the user, and it can be used to display content related to a single subject. We can use the following approach in ReactJS to use the Ant Design List Component 3 min read Like