Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

515
Visualizações
React FAQ component expands all items instead of just one

So I've created a FAQ section in my React/Nextjs app and I've almost gotten it to work. The only problem is that any time I click a single item to expand it, all the items end up expanding. I'm using state and a ternary operator to toggle it on and off but I need it to only expand the item that I'm currently clicking on.

Code

import styles from '../styles/FAQs.module.css'
import {useRef, useEffect, useState} from 'react';

const FAQs = () => {
  const [isToggled, setIsToggled] = useState(false);

  const toggler = () => {
    isToggled ? setIsToggled(false) : setIsToggled(true);
  }

  return (
    <div class={styles.container}>
      <div class={styles.accordion}>
        <div class={styles.accordionItem}>
          <button id="accordion-button-1" aria-expanded={isToggled} onClick={toggler}>
            <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span>
            <span class={styles.icon} aria-hidden="true"></span>
          </button>
          <div class={styles.accordionContent}>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
              Ut tortor pretium viverra suspendisse potenti.
            </p>
          </div>
        </div>

        <div class={styles.accordionItem}>
          <button id="accordion-button-1" aria-expanded={isToggled}>
            <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span>
            <span class={styles.icon} aria-hidden="true"></span>
          </button>
          <div class={styles.accordionContent}>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
              Ut tortor pretium viverra suspendisse potenti.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default FAQs
about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

I would vote for extracting a sub-component for one question-answer block and handle the expanded-state in there. This will also fix the code duplication in your code.

import styles from '../styles/FAQs.module.css'
import {useState} from 'react';

const FAQ = ({question = "", answer = ""}) => {
    const [isToggled, setIsToggled] = useState(false);

    const onToggle = () => {
        isToggled ? setIsToggled(false) : setIsToggled(true);
    }

    return <div className={styles.accordionItem}>
        <button id="accordion-button-1" aria-expanded={isToggled} onClick={onToggle}>
            <span className={styles.accordionTitle}>{question}</span>
            <span className={styles.icon} aria-hidden="true"></span>
        </button>
        <div className={styles.accordionContent}>
            <p>{answer}</p>
        </div>
    </div>
}

export default FAQ
import styles from '../styles/FAQs.module.css'
import FAQ from "./FAQ.js"

const FAQs = () =>
    <div class={styles.container}>
        <div class={styles.accordion}>
            <FAQ key="faq-1" question={"Why is the moon sometimes out during the day?"}
                 answer={"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " +
                     "incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. " +
                     "Ut tortor pretium viverra suspendisse potenti."}/>
            <FAQ key="faq-2" question={"Why is the sun sometimes out during the night?"}
                 answer={"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor " +
                     "incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut. " +
                     "Ut tortor pretium viverra suspendisse potenti."}/>
        </div>
    </div>

export default FAQs

Duplicated code fragments in your JSX are usually a signal that you should extract them. In your case, extraction also fixes the bug as each FAQ gets its own state. It will furthermore help you to prevent issues due to copy and paste mistakes.

In another improvement, you could have the questions and answers in an array and iterate over them in the JSX of the FAQs component. With that, you could separate data from rendering.

about 4 years ago · Juan Pablo Isaza Relatório

0

The problem with your code is that you have multiple FAQs but you only have one state and one function to handle all the FAQs so when you click on one FAQ, all the FAQs will be triggered because you've one state for all of them.

So create an individual state for all the FAQs.

import styles from '../styles/FAQs.module.css'
import {useRef, useEffect, useState} from 'react';

const FAQs = () => {
  const [isToggled1, setIsToggled1] = useState(false);
  const [isToggled2, setIsToggled2] = useState(false);


  const toggler1 = () => {
    isToggled1 ? setIsToggled1(false) : setIsToggled1(true);
  }

  const toggler2 = () => {
    isToggled2 ? setIsToggled2(false) : setIsToggled2(true);
  }

  return (
    <div class={styles.container}>
      <div class={styles.accordion}>
        <div class={styles.accordionItem}>
          <button id="accordion-button-1" aria-expanded={isToggled1} onClick={toggler1}>
            <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span>
            <span class={styles.icon} aria-hidden="true"></span>
          </button>
          <div class={styles.accordionContent}>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
              Ut tortor pretium viverra suspendisse potenti.
            </p>
          </div>
        </div>

        <div class={styles.accordionItem}>
          <button id="accordion-button-1" aria-expanded={isToggled2} onClick={toggler2}>
            <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span>
            <span class={styles.icon} aria-hidden="true"></span>
          </button>
          <div class={styles.accordionContent}>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
              incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
              Ut tortor pretium viverra suspendisse potenti.
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}

export default FAQs
about 4 years ago · Juan Pablo Isaza Relatório

0

You need to store toggle status for all the sections/accordions separately in a map/object or an array or multiple state variables and toggle the one that is clicked on.

import styles from '../styles/FAQs.module.css'
import {useRef, useEffect, useState} from 'react';

const FAQs = () => {
const [accordionStatus, setAccordionStatus] = useState({ accordion1: false, accordion2: false });

const toggler = (name) => {
  setAccordionStatus({ ...accordionStatus, [name]: !accordionStatus[name]);
}

   return (
<div class={styles.container}>
  <div class={styles.accordion}>
    <div class={styles.accordionItem}>
      <button id="accordion-button-1" aria-expanded={accordionStatus.accordion1} onClick={() => toggler(accordion1)}>
        <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span>
        <span class={styles.icon} aria-hidden="true"></span>
      </button>
      <div class={styles.accordionContent}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
          Ut tortor pretium viverra suspendisse potenti.
        </p>
      </div>
    </div>

    <div class={styles.accordionItem}>
      <button id="accordion-button-1" aria-expanded={accordionStatus.accordion2} onClick={() => toggler(accordion2)>
        <span class={styles.accordionTitle}>Why is the moon sometimes out during the day?</span>
        <span class={styles.icon} aria-hidden="true"></span>
      </button>
      <div class={styles.accordionContent}>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Elementum sagittis vitae et leo duis ut.
          Ut tortor pretium viverra suspendisse potenti.
        </p>
      </div>
    </div>
  </div>
</div>
 )}

export default FAQs
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda