Codstak
    • Home
    • DSA
    • JavaScript
    • TypeScript
    • Node.js
    • React
    • More↓
      BlogReact PrepPricingDiscordNewsletterLeaderboard
    React challenge/medium

    Repair the Help Center Accordion

    Challenge workspace

    30-40 min
    Components and propsPath 6/33
    Components & propsState & eventsConditional renderingAccessibility

    Suggested first

    Repair Account Settings Tabs

    Your workspace must pass its server-side browser checks to complete this challenge.

    FAQ Accordion

    Build an accessible accordion from a data array and a reusable FaqItem component.

    Requirements

    • Track the open FAQ by its stable id; do not store the entire object.
    • Render every item with map and a stable key.
    • Allow at most one answer to be open at a time.
    • Clicking an open item should close it.
    • Extract an FaqItem component whose behavior is controlled through props.
    • Add aria-expanded and aria-controls to each trigger.

    Stretch goal

    Support moving between accordion triggers with the up and down arrow keys.