SamwithCode

React Project Dynamic Accordion in React JS 2025

React Project - Dynamic Accordion in React JS 2025

Dynamic Accordion ka matlab hai ki hum ek aisa component banate hain jisme multiple sections hote hain. Har ek section ko click karne par woh expand ya collapse hota hai. Ye interactive UI component FAQs, menus ya information toggling ke liye use hota hai.

1. AccordionData.js

Yeh file ek array of objects hoti hai jo har accordion item ka title aur content hold karti hai.


export const accordionData = [
  {
    id: 1,
    title: "Section 1",
    content: "This is the content for section 1"
  },
  {
    id: 2,
    title: "Section 2",
    content: "This is the content for section 2"
  },
  {
    id: 3,
    title: "Section 3",
    content: "This is the content for section 3"
  }
];

2. AccordionItem.jsx

Yeh component har ek accordion item ko render karta hai. Isme content toggle karne ka logic hota hai.


import React, { useState } from "react";

const AccordionItem = ({ title, content }) => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleItem = () => {
    setIsOpen(!isOpen);
  };

  return (
    

      
      {isOpen && (
        

          {content}
        

      )}
    

  );
};

export default AccordionItem;

3. Accordion.jsx

Yeh component multiple AccordionItem components ko map karke render karta hai.


import React from "react";
import AccordionItem from "./AccordionItem";
import { accordionData } from "./AccordionData";

const Accordion = () => {
  return (
    

      {accordionData.map((item) => (
        
      ))}
    

  );
};

export default Accordion;

4. App.jsx

Main file jahan Accordion component ko render kiya jata hai.


import React from "react";
import Accordion from "./Accordion";

function App() {
  return (
    

      
Dynamic Accordion

      
    

  );
}

export default App;