## Problem Statement Build a reusable Accordion component in React using the Compound Components pattern. The component should support either of the following APIs: ```html Devtools Tech? 🤔 The aim with Devtools Tech is to create a platform for Frontend Engineers where we all can improve, invest in ourselves, and grow by learning from high quality real world programming content. This is a platform where you can practice actual interview questions, watch courses, read blogs, and keep track of your progress across various domains and topics. Is it Free? Yes, the platform and YouTube both are completely free! ``` or ```html Devtools Tech? 🤔 The aim with Devtools Tech is to create a platform for Frontend Engineers where we all can improve, invest in ourselves, and grow by learning from high quality real world programming content. This is a platform where you can practice actual interview questions, watch courses, read blogs, and keep track of your progress across various domains and topics. Is it Free? Yes, the platform and YouTube both are completely free! ``` Clicking an accordion header should expand or collapse its associated content panel. ## Requirements * Build the Accordion using the Compound Components pattern. * Support either of the APIs shown above. * Each `AccordionItem` must have a unique `id`. * Clicking a toggle should expand its corresponding panel. * Clicking an expanded toggle should collapse it when `collapsible` is enabled. * When `collapsible` is `false`, one panel should always remain open. * Only one accordion panel should be open at a time. * The Accordion should manage its own internal state. * Avoid unnecessary re-renders when toggling panels. * Structure the implementation into reusable components. ## Function Signature ```html Title Content ``` ## Arguments * `Accordion` * Accepts a `collapsible` boolean prop that determines whether the currently open panel can be collapsed. * `Accordion.Item` * Accepts a unique `id` used to identify the accordion item. * `Accordion.Toggle` * Renders the clickable header for an accordion item. * `Accordion.Panel` * Renders the collapsible content associated with an accordion item. ## Returns * `Accordion` * Renders the complete accordion with all its items. * `Accordion.Item` * Registers an accordion section within the parent accordion. * `Accordion.Toggle` * Toggles the visibility of its corresponding panel. * `Accordion.Panel` * Displays or hides its content based on the active accordion item. ## Example #### Initial State ```text ▶ Devtools Tech? 🤔 ▶ Is it Free? ``` #### After Clicking "Devtools Tech? 🤔" ```text ▼ Devtools Tech? 🤔 The aim with Devtools Tech is to create a platform for Frontend Engineers... ▶ Is it Free? ``` #### After Clicking "Is it Free?" ```text ▶ Devtools Tech? 🤔 ▼ Is it Free? Yes, the platform and YouTube both are completely free! ``` #### After Clicking the Open Panel (when `collapsible` is true) ```text ▶ Devtools Tech? 🤔 ▶ Is it Free? ``` ## Demos

## Submission Start the timer, complete your solution, test your solution against the test cases provided by the platform, and submit it. Ideally, you should finish this question within 60 mins.

This feels empty

0 day

0 day

Study Guides

Top JavaScript Multiple Choice Questions (MCQ) with Answers | Frontend Interview Questions | Beginner Friendly

Top JavaScript Array Interview Questions | Problem Solving | Array Polyfills

Frontend Coding Challenges | JavaScript | ReactJS | DevKode DOM Challenge

Advanced JavaScript Interview Questions | Problem Solving | Frontend Interview Questions

Top JavaScript Promises Interview Questions | Problem Solving | Promise Polyfills

Video Tutorials

Contribution Opportunities

Grow with like-minded people,

Join the devtools.tech community

Stay in the know

Instagram

YouTube

Twitter