How to Build a Accordion Using React v19
Accordions are a great way to organize content in a compact and user-friendly manner. They allow users to click on a heading (like a question) to reveal or hide the content beneath it (like the answer). In this post, I’ll guide you through the steps to create a simple accordion using React JS v19.
Steps to Build the Accordion
Create the Parent Accordion Component:
Import necessary hooks: Use useState and useEffect from React to manage state and effects.
Fetch FAQ data: Import your faq.json file or use sample data for the FAQ.
State for tracking the active FAQ: Create a state variable activeId using useState(null). This will store the ID of the currently active (opened) FAQ.
Function to toggle FAQ: Create a function handleToggle(id) that will:
If the clicked FAQ is already open, close it by setting activeId to null.
If another FAQ is clicked, open it by setting activeId to that FAQ’s ID.
Pass Data to the FAQ Component:
In the parent Accordion component, loop through the FAQ data using map().
For each FAQ, pass down:
The data (curData) for the current FAQ.
The current activeId to determine if the FAQ should be open or closed.
A function onToggle to handle when the FAQ is clicked.
Build the Child FAQ Component:
Props: Accept the curData, isActive, and onToggle as props.
Display FAQ Question: Show the question for the FAQ.
Toggle Button: Create a button that calls onToggle when clicked, toggling between "Show" and "Close".
Conditionally Show Answer: Use the isActive prop to determine if the answer should be visible. If isActive is true, display the answer; otherwise, keep it hidden.
Final Integration:
When a user clicks on an FAQ question, it toggles between open and closed.
Only one FAQ can be open at a time. If another FAQ is clicked, the previous one will close automatically.
Visual Overview of the Logic:
Parent Accordion Component:
Holds all FAQ data.
Manages the state of which FAQ is active.
Passes down data and functions to control the behavior of each FAQ.
Child FAQ Component:
Receives individual FAQ data.
Knows if it's active based on the state from the parent.
Toggles its own state to show or hide the answer.
Bonus:
The code is structured to be reusable. You can easily add more FAQs by just updating the data, and the component will handle it automatically.
Access the Complete Source Code
If you're ready to dive in, you can access the entire source code for this tutorial on my GitHub. Just click the link below to get started:
Support My Work & Get All Video Source Codes + Notes
If you'd like to support my work and access the source code for all of my YouTube videos, along with detailed notes, you can buy them for just ₹249. It's a great way to learn and help me continue providing free tutorials to the community.
Buy All Source Codes + Notes for ₹249
Thank you for your support! I hope this tutorial helps you enhance your skills in React JS. Feel free to share your feedback in the comments or on social media.
