mapping array of objects in react

my goal is to create an accordion using useState hook and the array map method. I have mapped through my objects and they display correctly, but my issue is the useState hook toggles all the accordion items. how do i select a specific one toggle on click? my code:
{faqsData.map(({ title, details, index }) => (
// faq item
<div className="faq">
{/* faq title */}
<div className="faq_title" onClick={() => setFaq(!isFaq)}>
{title}
{isFaq ? (
<RemoveIcon className="faq_icon" />
) : (
<AddIcon className="faq_icon" />
)}
</div>
{/* faq details */}
{isFaq && <p className="faq_details">{details}</p>}
</div>
))}
{faqsData.map(({ title, details, index }) => (
// faq item
<div className="faq">
{/* faq title */}
<div className="faq_title" onClick={() => setFaq(!isFaq)}>
{title}
{isFaq ? (
<RemoveIcon className="faq_icon" />
) : (
<AddIcon className="faq_icon" />
)}
</div>
{/* faq details */}
{isFaq && <p className="faq_details">{details}</p>}
</div>
))}
2 Replies
glutonium
glutonium11mo ago
perhaps use 2 state 1 will store all the accordions and 1 will hold just the one thats showing and u basically use the 2nd state to show the accordion when user selects a specific accordion, change the value of the 2nd state to that corresponding accordion thus the component will re-render and show the updated accordion
winniffy
winniffy11mo ago
thank you
Want results from more Discord servers?
Add your server