React Accordion / FAQ Component

What you’ll build / What this tests

This premium react coding focuses on React Accordion / FAQ Component. You’ll apply react and state thinking with intermediate level constraints. The prompt emphasizes Build a simple FAQ (accordion) UI in React using component state. Clicking a question should toggle….

Learning goals

• Translate the prompt into a clear react API signature and return shape.
• Apply react, state, components techniques to implement react accordion / faq component.
• Handle intermediate edge cases without sacrificing readability.
• Reason about time/space complexity and trade-offs in react.

Key decisions to discuss

• Define the exact input/output contract before coding.
• Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

• Correctness: covers required behaviors and edge cases.
• Clarity: readable structure and predictable control flow.
• Complexity: avoids unnecessary work for large inputs.
• API discipline: no mutation of inputs; returns expected shape.
• Testability: solution is easy to unit test.

Constraints / Requirements

• Render a main component that shows a FAQ card with 3–4 FAQ items.
• Each FAQ item has a question (header) and an answer (body).
• Clicking a question toggles its answer open/closed.
• In the default mode, only one FAQ item can be open at a time.
• Add a control (e.g. a checkbox) to switch to 'allow multiple open' mode.
• In 'allow multiple open' mode, more than one FAQ item can be open at the same time.
• Initially all FAQ items are closed.
• Clicking a closed question opens its answer.
• In single-open mode: opening one item closes any other open item.
• Switching to multi-open mode keeps currently open items and allows opening more.

Mini snippet (usage only)

// Example usage
const input = /* react accordion / faq component input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

• Mutating inputs instead of returning a new value.
• Skipping edge cases like empty input, duplicates, or nulls.
• Overlooking time complexity for large inputs.

Related questions

• React Counter (Guarded Decrement)Free
• Todo List (Component with Local State)Free
• React Star Rating WidgetPremium
• Image Slider (Dots + Previous/Next)Premium
• React Chessboard Click/Highlight (N×N Board)Premium
• React Dynamic Table (Rows × Columns)Premium