Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Create Nested Accordion in React — Recursively Rendered Collapsible Tree with Unlimited Nesting Depth

Prompt

Build an accordion component that supports arbitrarily deep nesting — each accordion item can itself contain a list of child accordion items, which can in turn have their own children. The data is a recursive tree structure: [{title, children: [...]}]. Render this recursively by calling the same Accordion component for the children array. Each node toggles independently. The visual indentation increases at each level to indicate depth. This differs from a flat accordion in that it must handle a tree of unknown depth using recursion rather than a simple flat array. Track open/closed state per node using the node's id or index path.

Define AccordionItem component that renders a toggle button and conditionally renders children.
Test Results

Create Nested Accordion in React — Recursively Rendered Collapsible Tree with Unlimited Nesting Depth

Build an accordion component that supports arbitrarily deep nesting — each accordion item can itself contain a list of child accordion items, which can in turn have their own children. The data is a recursive tree structure: [{title, children: [...]}]. Render this recursively by calling the same Accordion component for the children array. Each node toggles independently. The visual indentation increases at each level to indicate depth. This differs from a flat accordion in that it must handle a tree of unknown depth using recursion rather than a simple flat array. Track open/closed state per node using the node's id or index path.