• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Home
  • About Us
  • Django
  • Laravel
  • Interview Questions
  • Tips

CodingStatus

- Learn Coding to Build Web Applications

  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL

How to Create Accordion in React Js

January 9, 2022 By Md Nurullah Leave a Comment

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.

react js accordion

Contents

  • Dynamic Accordion in React Js
    • 1. Create Accordion Data
    • 2. Create an Accordion Component
    • 3. Create Accordion List Component
    • 4. Render Accordion Component
    • 5. Test Accordion Yourself

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/

 

Related Posts:

  • React Lists
  • Create Charts in React Js
  • React Fragments
  • Create React App Project Step By Step

Filed Under: ReactJS

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Follow us

  • facebook
  • twitter
  • linkedin

Recent Posts

  • SQL HAVING – Definition, Query, Syntax, Example
  • Integrate Google reCAPTCHA using PHP
  • CSS Interview Questions and Answers
  • Approve And Disapprove in Ajax, PHP & MySQL
  • HTML Interview Questions and Answers
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2022 CodingStatus - All Rights Reserved