Kevin Powell - Community•12mo ago

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•12mo 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

winniffyOP•12mo ago

thank you

Gaming

Programming

mapping array of objects in react