How to create accordion with arrow using react-bootstrap in React Js?

March 19, 2023

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To create an accordion with an arrow using react-bootstrap in react js, you have to install the react-bootstrap library and use the Accordion component from it, that’s how you can make accordion with an arrow using react-bootstrap.

See a short example of making an accordion with an arrow using react-bootstrap.

<Accordion defaultActiveKey="0">
  <Accordion.Item eventKey="0">
    <Accordion.Header>Accordion Item #1</Accordion.Header>
    <Accordion.Body>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.
    </Accordion.Body>
  </Accordion.Item>
</Accordion>

In this article, you will get a complete example of a react-bootstrap accordion with an arrow step by step.

Here, is the list of what I am going to explain.

Install React-Bootstrap
Import Required Components
Create Items Array
Create an Accordion Component
Example of React-Bootstrap accordion with arrow

Let’s start today’s tutorial How to create accordion with an arrow in react js

Install React-Bootstrap

To install the react-bootstrap package first you have to install the bootstrap package and then import css file of bootstrap in your application.

Use the following command to install the latest react-bootstrap and bootstrap packages.

npm install bootstrap react-bootstrap

Import the CSS file in your index.js file.

index.js

...
import "bootstrap/dist/css/bootstrap.min.css";
...

Import Required Components

To use the Accordion component from the react-bootstrap package you have to import from it like the below code.

In this example, I need only the Accordion component so I will import it like below.

import { Accordion } from "react-bootstrap";

Create Items Array

Generally, Everyone has to show data in an accordion from an array So I have also created an array with some dump data.

const items = [
  {
    title: "Accordion Item #1",
    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.`,
  },
  {
    title: "Accordion Item #2",
    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.`,
  },
];

Create an Accordion Component

So, now I’m going to show you how I used react-bootstrap Accordion Component using an array map.

<Accordion defaultActiveKey="0">
  {items.map((item, index) => {
    return (
      <Accordion.Item eventKey={index.toString()}>
        <Accordion.Header>{item.title}</Accordion.Header>
        <Accordion.Body>{item.content}</Accordion.Body>
      </Accordion.Item>
    );
  })}
</Accordion>

Example of React-Bootstrap accordion with arrow

In all the above sections you get a small code snippet with their explanations. like in the above section we know

How to install react-bootstrap in react js
How to import bootstrap css file into your project
How to import the accordion component from react-bootstrap
How to create an array with data for the accordion component
How to use an accordion component with array map
How to show dynamic content into accordion

So, what You will get in this section.

In these sections, you will get a complete example of How to create accordion using react-bootstrap in react js.

Plus codesandbox link which you can use to check output and change as per your requirement.

One more thing, in accordion you will get an arrow by default You don’t have to do extra work to add an arrow in the accordion.

import { Accordion } from "react-bootstrap";

function BasicExample() {
  const items = [
    {
      title: "Accordion Item #1",
      content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.`
    },
    {
      title: "Accordion Item #2",
      content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
      est laborum.`
    }
  ];

  return (
    <div style={{ padding: "20px" }}>
      <Accordion defaultActiveKey="0">
        {items.map((item, index) => {
          return (
            <Accordion.Item eventKey={index.toString()}>
              <Accordion.Header>{item.title}</Accordion.Header>
              <Accordion.Body>{item.content}</Accordion.Body>
            </Accordion.Item>
          );
        })}
      </Accordion>
    </div>
  );
}

export default BasicExample;

So this is the complete example, here you codesandbox link for the above program, use it, change it, fork it do what you want you to do with it.

Try it Yourself

All the best 👍.