import React, { useState, useContext, createContext } from 'react'; // 1. Create a Context for the compound component const AccordionContext = createContext(); // 2. Parent Component (Provider) function Accordion({ children }) { const [openIndex, setOpenIndex] = useState(null); const toggle = (index) => { setOpenIndex(openIndex === index ? null : index); }; return (

{children}

); } // 3. Child Components (Consumers) function AccordionItem({ index, children }) { return (

{React.Children.map(children, (child) => React.cloneElement(child, { index }) )}

); } function AccordionHeader({ index, children }) { const { openIndex, toggle } = useContext(AccordionContext); const isOpen = openIndex === index; return ( ); } function AccordionPanel({ index, children }) { const { openIndex } = useContext(AccordionContext); if (openIndex !== index) return null; return (

{children}

); } // 4. Attach sub-components to the parent for easier access (optional) Accordion.Item = AccordionItem; Accordion.Header = AccordionHeader; Accordion.Panel = AccordionPanel; // 5. Usage: function App() { return ( What is React? React is a JavaScript library for building UIs. Why use Compound Components? Because they provide a clean and flexible API! ); } export default App;

Phase 6: Advanced Component Patterns

0 of 3 topics completed

Compound Components

Render Props

Control Props Pattern

🎤 Mock Interview