How to create accordion with arrow using react-bootstrap in React Js?
March 19, 2023Hi 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 fromreact-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.
All the best 👍.
hope it help you.