How to Build an Accordion Component in React

This content originally appeared on DEV Community and was authored by Pradnya Hegde

An Accordion component is a UI pattern where only one section can be expanded at a time, and clicking on a section will either expand it or collapse it. You may have come across this component in an FAQ section of any website.

In this article, we are going to discuss a web app, using React Hook useState(), that can expand a single section or multiple sections.

Click here for the live demo.
Click here for the Github repo

Project Setup

Create a new React app using the following command –

npx create-react-app accordian

Once the project is created, delete all files from the src folder and create data.js, Accordion.js, and styles.css files inside the srcfolder. Open the styles.cssfile and add the contents from here inside it.

Add styling to index.html

Open public/index.html and delete all the content, then copy the content from here

Load data

You can copy the contents of here to src/data.js or add your own data in the given format.

Save the component code

Open the src/Accordian.js file and add the content from here to it.

Run the application

On your terminal, execute the following command to run the application
> npm install
> npm start
In your browser, you should see a web page as shown in above image.

How code works

The return() function loops through the data imported from data.js and conditionally renders data.

{
        data && data.length > 0 ? (
          data.map((dataItem) => (
          /* 
            Rendering the conditional statements 
          */
        )))
    }

We’re using the useState() hook to track ID/IDs of the clicked section/sections. By default, all the accordion sections are collapsed.

In the file Accordian.js, two state variables selected and enableMultiSelection are used –

const [selected, setSelected] = useState(null);
const [enableMultiSelection, setEnableMultiSelection] = useState(false);
const [multiple, setMultiple] = useState([]); // State varible store ID's of all selected sections.

enableMultiSelection state variable is like a checkbox. The default value of enableMultiSelection is false. When a user clicks on Click Here To Enable Multi Selection button, the value of this state variable turns true;

Single section selection (Button Enable Multi Selection is not clicked)

When the user clicks on a section to expand, the onClick handler method handleSingleSelection() gets invoked. This function sets the value of the state variable selected to the ID of the clicked section.

setSelected(getCurrentId === selected ? null : getCurrentId);

This enables the highlighted part of the following code to get executed.

and only one section gets expanded.

Multi-selection (Button Enable Multi Selection is clicked)

Clicking on the button sets the state variable enableMultiSelection to true and also invokes the onClick handler method handleMultiSelection(). This method sets the state variable multiple with the values of the IDs of all the selected sections.
The following image highlights the part of the code that gets executed.

All the selected sections get expanded.

This content originally appeared on DEV Community and was authored by Pradnya Hegde