5 replies

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>
      ))}

KP-C

Kevin Powell - Community•3y ago•

5 replies

winniffy

mapping array of objects in react

{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>
      ))}

mapping array of objects in react

Similar Threads

mapping array of objects in react

Similar Threads

Similar Threads

Similar Threads