How To Use React Bootstrap Accordion With ReactJs

In this article, we will learn how to use react-bootstrap accordion in reactjs.

-A front-end framework called React-Bootstrap was developed with react in mind. Our card components can be opened one at a time with the aid of the accordion component.

–First of all, we have create react application.

–Then create an App.js file inside the src directory.

-After creating the App.js application, Install the required module using the below command

npm install react-bootstrap 
npm install bootstrap

-Write the below code in your file:

import React from "react";
import { Accordion, Card, Button } from "react-bootstrap";

const tabs = [
  { id: 1, label: "Tab A", description: "tab A content" },
  { id: 2, label: "Tab B", description: "tab B content" },
  { id: 3, label: "Tab C", description: "tab C content" }
];

export default function App() {
  return (
    <div className="App">
      {tabs.map(tab => (
        <Accordion key={tab.id} defaultActiveKey={tab.id}>
          <Card>
            <Card.Header>
              <Accordion.Toggle as={Button} variant="link" eventKey={tab.id}>
                {tab.label}
              </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey={tab.id}>
              <Card.Body>{tab.description}</Card.Body>
            </Accordion.Collapse>
          </Card>
        </Accordion>
      ))}
    </div>
  );
}

Output:

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories