Frontendx

README.md

SOLUTION.md

main.tsxentry

App.tsx

App.css

index.html

vite.config.ts

Plugins

Installed

react@^19.2.0

react-dom@^19.2.0

Editor

Accordion Group in React — Compound Component Pattern Where Only One Accordion Can Be Open at a Time

easycompound component pattern context api accordion group single vs multi open usestate react sde2TekionAmazonUberUI Component

Prompt

Build an accordion group component using the Compound Component Pattern. The group enforces a rule: at most one accordion panel can be open at any time — opening one automatically closes the previously open one. Implement using Context API to share the activeId state within the group in isolation without prop drilling. The AccordionGroup wraps multiple Accordion children; each Accordion consumes context to know if it is the active one. Support a multi prop that when true allows multiple accordions to be open simultaneously. Use react-icons for open/close chevron icons. This is a commonly asked question at SDE1, SDE2, and SDE3 level. This was asked in Tekion's senior frontend interview.

Create a Context with activeId and a setter to manage which accordion is open.

Preview

Terminal

Test Results