Solution

You can model the visible answers as one React state value: the set of row indices that are open.

The problem, in plain English

Each question is a separate switch. Opening the refund answer must not close the cancellation answer, and clicking an open question must close it. The button, chevron, and answer region must all reflect the same state.

The mental model

A single number can name only one open row. A Set can contain zero, one, or several indices, so membership answers the question “is this row open?” without another flag.

A first attempt

const [openIndex, setOpenIndex] = useState(-1);

<button onClick={() => setOpenIndex(i)}>{faq.q}</button>
{openIndex === i && <p>{faq.a}</p>}

This stores only one index, so opening a second answer replaces the first. Clicking the same question also writes the same index instead of closing it.

The working solution

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

const faqs = [
  {
    q: 'Can I cancel anytime?',
    a: 'Yes. Cancel from the billing page whenever you like — you keep access until the end of the current billing period.',
  },
  {
    q: 'Do you offer refunds?',
    a: "We refund any plan within 14 days of purchase, no questions asked. Contact support and we'll take care of it.",
  },
  {
    q: 'Is my data secure?',
    a: 'Every request is encrypted in transit and at rest, and we never sell your data to third parties.',
  },
];

export default function App() {
  const [open, setOpen] = useState<Set<number>>(() => new Set());

  function toggle(i: number) {
    setOpen((previous) => {
      const next = new Set(previous); // React needs a new reference to re-render.
      if (next.has(i)) next.delete(i);
      else next.add(i);
      return next;
    });
  }

  return (
    <main className="container">
      <h1>FAQ Disclosure</h1>
      {faqs.map((faq, i) => {
        const isOpen = open.has(i);
        const answerId = `faq-answer-${i}`;
        const questionId = `faq-question-${i}`;

        return (
          <div key={faq.q} className={isOpen ? 'item open' : 'item'}>
            <button
              type="button"
              className="q"
              id={questionId}
              aria-expanded={isOpen}
              aria-controls={answerId}
              onClick={() => toggle(i)}
            >
              {faq.q}
              <span className="chevron" aria-hidden="true">▾</span>
            </button>
            {isOpen && (
              <p id={answerId} className="a" role="region" aria-labelledby={questionId}>
                {faq.a}
              </p>
            )}
          </div>
        );
      })}
    </main>
  );
}

The functional updater always receives the latest set. Copying it before add or delete gives React a new reference, while isOpen drives the class, ARIA value, and conditional region from one source.

Walking through one interaction

Start with an empty set. Clicking row 0 copies it and adds 0, then React renders row 0 open. Clicking row 1 produces {0, 1}, so both regions remain visible. Clicking row 0 again deletes only 0, leaving {1}.

Gotchas

• Mutating state in place: returning the same Set reference can skip the render; copy before changing membership.
• Duplicating state: separate booleans for the class, ARIA value, and panel can disagree; derive all three from open.has(i).
• Losing the control link: aria-controls must match the rendered answer id for that row.

Going further

• Add arrow-key navigation between question buttons.
• Animate the answer while respecting reduced-motion preferences.
• Replace the set with one nullable index to create a single-open accordion variant.

Alternative solutions

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

const faqs = [
  { q: 'Can I cancel anytime?', a: 'Yes. Cancel from the billing page whenever you like — you keep access until the end of the current billing period.' },
  { q: 'Do you offer refunds?', a: "We refund any plan within 14 days of purchase, no questions asked. Contact support and we'll take care of it." },
  { q: 'Is my data secure?', a: 'Every request is encrypted in transit and at rest, and we never sell your data to third parties.' },
];

export default function App() {
  const [open, setOpen] = useState<Record<number, boolean>>({});
  const toggle = (i: number) => setOpen((state) => ({ ...state, [i]: !state[i] }));

  return (
    <main className="container">
      <h1>FAQ Disclosure</h1>
      {faqs.map((faq, i) => {
        const isOpen = Boolean(open[i]);
        const questionId = `faq-question-${i}`;
        const answerId = `faq-answer-${i}`;
        return (
          <div key={faq.q} className={isOpen ? 'item open' : 'item'}>
            <button type="button" className="q" id={questionId} aria-expanded={isOpen} aria-controls={answerId} onClick={() => toggle(i)}>
              {faq.q}<span className="chevron" aria-hidden="true">▾</span>
            </button>
            {isOpen && <p id={answerId} className="a" role="region" aria-labelledby={questionId}>{faq.a}</p>}
          </div>
        );
      })}
    </main>
  );
}