How to Create Accordion in React Js

In this tutorial, You will learn How to create a dynamic accordion in React js by implementing some simple steps that are very easy to understand and integrate into projects.

If you need to display important information in the form of multiple lists within a specific area, then you should arrange them in an accordion list. So that users can easily read the given information by clicking on each heading.

In this tutorial, I have created an awesome React accordion with plus and minus icons that is absolutely attractive & user-friendly. When you run your app, you will see only some heading with plus icons in the form of lists. When you click heading one by one then you will see the content & minus icon of that heading respectively.

Dynamic Accordion in React Js

In this tutorial, I have created a dynamic accordion in react js using functional components. Once, you learn it, you can easily create it yourself using the class component.

Learn Also –

Create  React Charts in React Js

Create a Simple React Todo App

Portfolio Gallery with Filtering in React Js

Create React Weather App

Preview Multiple Images before Uploading in React Js

Before getting started, you have to create react app with npm and create the following folders & files within its default folder structure

reactapp/
  |__public/
  |    |__images/
  |__src/
  |   |
  |  accordion/
  |       |__AccordionData.js
  |       |__Accordion.js
  |       |__AccordionList.js

I have used bootstrap 4 to create a responsive weather app. So, You should run the following command

npm install bootstrap

Also, you have to import it into the App.js

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

For more information, you can learn How to use Bootstrap in React Js

1. Create Accordion Data

First of all, create some data in the form of a JSON array. Here, I have created some questions & answers to display in accordion dynamically. But you can also add more data to this file.

File Name – AccordionData.js

const AccordionData =[
    {
        id:1,
        qn:"What is Lorem Ipsum?",
        ans:"Lorem Ipsum is simply dummy text of the printing and typesetting industry"   
    },
    {
        id:2,
        qn:"Where does it come from?",
        ans:"Contrary to popular belief, Lorem Ipsum is not simply random text"
       
    },
    {
        id:3,
        qn:"Why do we use it?",
        ans:"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout"
       
    },
    {
        id:4,
        qn:"Where can I get some?",
        ans:"There are many variations of passages of Lorem Ipsum available"
       
    }
]

export default AccordionData;

2. Create an Accordion Component

Accordion Component

import AccordionList from "./AccordionList";
import AccordionData from "./AccordionData";
import { useState } from "react";
function Accordion(){

const [toggle, setToggle] = useState(null);
let handleToggle=(id)=>{
    if(toggle===id){
        setToggle(null);
        return false
    }
   setToggle(id)
   
}
    return(
        <div className="container">
            <div className="row">
                <div className="col-sm-4">
                <h3>React Accordion</h3>
                <AccordionList accordionData={AccordionData} handleToggle={handleToggle} toggle={toggle} />
                </div>
            </div>
        </div>
           
        
    )
}

export default Accordion;

3. Create Accordion List Component

function AccordionList({accordionData, handleToggle, toggle}){

    return(

            
                accordionData.map((value)=>{
                    const {id, qn, ans} = value;
                    return(
                        <div className="card" key={id}>
                        <div className="card-header" onClick={()=>handleToggle(id)} style={{cursor:"pointer"}}> <b>{(id===toggle)?'-':'+'} {qn}</b></div>
                        {(id===toggle)?<div className="card-body">{ans}</div>:''}
                     
                    </div>
                    
                    )
                })

    )
}

export default AccordionList;

4. Render Accordion Component

To render the Accordion component, You should import it into the App component and return   <Accordion />.

File Name – App.js

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Accordion from "./accordion/Accordion";
function App() {
  render(){
  return (
    <Accordion />
  );
  }
}
export default App;

5. Test Accordion Yourself

Now, you can test the React Accordion yourself  by running the React App with the following command

npm start

After that, you can see the React Accordion by opening the following URL in your web browser

http://localhost:3000/