FAQ Component Guide

This component renders a collapsible list of Frequently Asked Questions (FAQs) with toggled visibility for each answer. It uses React functional components, useState for interaction, and CSS Modules for styling.

📦 Component Overview

The component is composed of two parts:

• FAQItem – Represents a single question-answer pair with toggle logic.
• FAQ – Accepts an array of FAQ items and renders a list.

🧩 Usage Example

To use this component, import it into your page and pass it a list of question-answer objects:

import FAQ from '@site/src/components/FAQ';

const faqItems = [
  {
    question: "What is Hasbara?",
    answer: "Hasbara is the proactive effort to communicate and advocate for Israel’s truth in the world."
  },
  {
    question: "Can I contribute to the site?",
    answer: "Yes! Visit the Dashboard to get started and see contribution guidelines."
  }
];

<FAQ items={faqItems} />

🛠 Props

FAQ accepts a single prop:

Prop	Type	Description
items	FAQItemProps[]	Array of objects with question and answer fields

Each FAQItemProps contains:

• question – The text of the FAQ question.
• answer – The text of the answer (supports HTML and Markdown content).

Best Practices

• Keep answers concise and actionable.
• Use this component on contributor or help pages.
• You can nest other components or rich content inside the answer string using JSX if needed.