React FAQ Components: Interactive and Reusable

React allows us to turn static FAQ sections into dynamic, stateful components that can be easily reused across multiple pages or projects.

Benefits of React for FAQs

• State Management: Easily track which items are open or closed.
• Props-driven Content: Pass FAQ data as an array to keep your component logic separate from your content.
• Conditional Rendering: Show or hide search bars, "Contact Us" buttons, or category headers based on your data.

A Simple Accordion Component

A basic React accordion uses the useState hook to manage the active index.

import { useState } from "react";

interface FaqItem {
  id: string;
  question: string;
  answer: string;
}

export function Accordion({ items }: { items: FaqItem[] }) {
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  return (
    <div className="space-y-4">
      {items.map((item, index) => {
        const triggerId = `faq-trigger-${item.id}`;
        const panelId = `faq-panel-${item.id}`;
        const isOpen = openIndex === index;

        return (
          <div key={item.id} className="border rounded-lg overflow-hidden">
            <button
              id={triggerId}
              className="w-full text-left p-4 font-bold bg-gray-50 hover:bg-gray-100 transition-colors"
              onClick={() => setOpenIndex(isOpen ? null : index)}
              aria-expanded={isOpen}
              aria-controls={panelId}
            >
              {item.question}
            </button>
            {isOpen && (
              <div
                id={panelId}
                role="region"
                aria-labelledby={triggerId}
                className="p-4 border-t text-gray-600"
              >
                {item.answer}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

Adding Search Functionality

For large FAQs, adding a client-side search filter significantly improves the user experience.

const [query, setQuery] = useState("");
const filteredItems = items.filter((item) =>
  item.question.toLowerCase().includes(query.toLowerCase()),
);

return (
  <>
    <label htmlFor="faq-search">Search questions</label>
    <input
      id="faq-search"
      type="search"
      value={query}
      onChange={(event) => setQuery(event.target.value)}
    />
    <p aria-live="polite">{filteredItems.length} results</p>
    {filteredItems.map((item) => (
      <article key={item.id}>
        <h3>{item.question}</h3>
        <p>{item.answer}</p>
      </article>
    ))}
  </>
);

Accessibility with ARIA

React makes it easy to manage ARIA attributes dynamically. Ensure you use:

• aria-expanded: Set to true when the answer is visible.
• role="region": For the content container.
• id and aria-controls: To link the button to the content it reveals.

Animation Options

Start with CSS transitions on opacity or grid rows. Keep the answer available to assistive technology only when it is visually open, and respect prefers-reduced-motion.

Best Practices

1. Unique Keys: Always use a unique identifier (like an ID or a slug) for the key prop, rather than the array index if the list can change.
2. Memoization: If you have a very long list of FAQs, use useMemo for your filtering logic.
3. Default States: Decide if you want all items closed by default, or the first one open to guide the user.

Conclusion

React allows for the creation of interactive and accessible FAQ components. By leveraging hooks and props, you can create a flexible system that adapts to your application's requirements.