An accordion is a stack of titled sections where each body stays hidden until the user clicks its header. You see them everywhere — FAQ pages where each question expands to reveal its answer, collapsible documentation chapters, expandable settings panels in app preferences. The pattern lets users scan titles first and dive into only the content they care about.
Build a React component that renders the section list and toggles each body open or closed when its header is clicked. You'll use useState and conditional rendering.
You're given a sections array. Each item has an id, a title, and a body. In App.tsx:
data-open={isOpen}.styles.css.sections array may be empty, one item, or many. Your render path should handle all three without changes.useState<Set<string>> keyed by id, not booleans keyed by index.<button> for the header (focus + Enter/Space for free) and set aria-expanded.Three files in the sandbox:
App.tsx — the component you'll edit. The sections array is pre-seeded and three headers render in their closed state. TODO comments mark where state, the toggle handler, and the body render go.index.tsx — bootstraps the React root. Don't edit.styles.css — dark-theme styling plus chevron rotation hook. Edit only if you want to change visuals.