Dynamic accordion menu using ReactJs Tutorial

You are creating a Website using ReactJs and you have FAQ Page or a Page where you want to show a large amount of content. If you will display the details straight to the page, it will be too long for anyone to read and honesty no one would like to read the information that you are providing. So today we will create a Dynamic accordion menu using ReactJs.

Yes, Here Accordion comes to the rescue. One can simply categories the data and show them as a Pills, Tabs or Accordion. But here we will focus on Accordion only and we will create it in Reactjs. Okay, so enough talking let’s get our hands dirty.

 




 

     Download

1. Starting off with create-react-app

Let’s create a React app using create-react-app CLI to create new React app.This CLI is actually built by Facebook for developers to create a well structured React application.

To install the create-react-app tool use the below command:

Once you do so use below command to create a new application:

Now this command will create a new folder called accordion and download the all necessary dependencies. To run the application in development mode you should use npm start and run the application in production mode you should use npm run build.

Since we are creating a dynamic accordion, we will axios to fetch data from the mock API server, just to generate fake data. You can install axios using npm , Below is my package.json file:

package.json:

I normally prefer to create my all components in a separate folder.Here I have created a folder named as component and I will create my accordion component inside it. Below is our project’s folder structure.

 

Dynamic accordion menu using ReactJs2. Creating a Dynamic accordion menu using ReactJs

Here we will create two files Accordion.jsSection.js and We will use App.js and index.css created by create-react-app CLI. Let’s start off by modifying App.js:

App.js:

Explanation:

Nothing too fancy here, I have just imported Accordion component and that’s it.

3. Generating a Fake data and calling Accordion

Let’s write something inside the Accordion.js, In this component, we will call another component named as Section. The Section component is part of  Accordion component.

Accordion.js:

Explanation:

1. Imports:- We have three imports here first two are the node modules and the Third one is <Section> component.

2. constructor(props):- Inside the constructor method, there’s stats and props And If you work with React I assume you are familiar with it.

3. componentDidMount():- We will generate fake data from Mock REST API.

4.  renderLoading():- This method will render the Loading Text till the previous method gets data from Mock API server.

5.  renderError():- This method will render the error message on the Page.

 6. renderPosts():- This method will call the <Section/> component and render the Accordion in a Loop.

4. Displaying the Accordion

Now open the Section.js and write down the below code. In the <Section/> component, we will handle the hide and show part of Accordion. As I said earlier the <Section/> component will be called by Accordion component in a loop.

Section.js:

Explanation:

The handleClick() method will add and remove the class name from the Elements. The render method() will return the single Accordion along with hiding and show functionality and So now we have successfully implemented Dynamic Accordion using ReactJs.