ReactJS MDBootstrap List Group Component - GeeksforGeeks

10 Jan, 2022
MDBootstrap is a Material Design and bootstrap-based react that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use List Group Component in ReactJS MDBootstrap. List groups are a flexible and powerful component for displaying a series of content.
Properties:
tag: It is used to define the tag of the component.
className: It is used to add a custom class to the component.
horizontal: It is used to create a horizontal list group.
horizontalSize: It is used to allow to set a horizontal breakpoint if the horizontal property is set.
flush: It is used to render the component without some borders.
Syntax:
<MDBListGroup>
    <MDBListGroupItem>GeeksforGeeks</MDBListGroupItem>
</MDBListGroup>
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. foldername, move to it using the following command.
cd foldername
Step 3: Install ReactJS MDBootstrap in your given directory.
npm i mdb-ui-kit
npm i mdb-react-ui-kit
Step 4: Import the element to be used in the project.
import { MDBListGroup } from 'mdb-react-ui-kit'
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Example 1: This is the basic example that shows how to use List Group Component.
 
App.js
import React from "react";import { MDBListGroup, MDBListGroupItem } from "mdb-react-ui-kit";  export default function App() {    return (        <div id="gfg">              <MDBListGroup >                <MDBListGroupItem>                    GeeksforGeeks                </MDBListGroupItem>                                  <MDBListGroupItem>                    React                </MDBListGroupItem>                                  <MDBListGroupItem>                    List Group Component                </MDBListGroupItem>            </MDBListGroup>        </div>    );}
Output:
Example 2: In this example, we will know how to use contextual classes in a list group component.
App.js
import React from "react";import { MDBListGroup, MDBListGroupItem } from "mdb-react-ui-kit";  export default function App() {    return (        <div id="gfg">              <MDBListGroup >                <MDBListGroupItem color='warning'>                    Warning List</MDBListGroupItem>                <MDBListGroupItem color='danger'>                    Danger List</MDBListGroupItem>                <MDBListGroupItem color='success'>                    Success List </MDBListGroupItem>            </MDBListGroup>        </div>    );}
Output:
Example 3: In this example, we will know how to use CheckBoxes in a List group component.
App.js
import React from "react";import { MDBListGroup, MDBListGroupItem, MDBCheckbox } from "mdb-react-ui-kit";  export default function App() {    return (        <div id="gfg">              <MDBListGroup >                <MDBListGroupItem>                    <MDBCheckbox inline />                    GeeksforGeeks</MDBListGroupItem>                <MDBListGroupItem>                    <MDBCheckbox inline />                    ReactJS</MDBListGroupItem>                <MDBListGroupItem>                    <MDBCheckbox inline />                    List-Group </MDBListGroupItem>            </MDBListGroup>        </div>    );}
Output:
Reference: https://mdbootstrap.com/docs/b5/react/components/list-group/
MDBootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to navigate on path by button click in react router ?
How to create a table in ReactJS ?
How to check the version of ReactJS ?
Explain the purpose of render() in ReactJS
How to set background images in ReactJS ?
Express.js express.Router() Function
How to set input type date in dd-mm-yyyy format using HTML ?
Installation of Node.js on Linux
Differences between Functional Components and Class Components in React
How to create footer to stay at the bottom of a Web page?