// Lesson 19 — Component Patterns import { createContext, useContext, useState } from 'react' // ─── TODO 1: Controlled StarRating ───────────────────────── // Parent owns value, component calls onChange function StarRating({ value, onChange, max = 5 }) { return (

{Array.from({ length: max }, (_, i) => i + 1).map(star => ( ))}

) } // Usage — parent controls value: // const [rating, setRating] = useState(0) // // ─── TODO 2: Compound Tabs ────────────────────────────────── const TabsContext = ???(null) function Tabs({ children, defaultTab }) { const [active, setActive] = ???(defaultTab) return (

{children}

) } // Sub-components read from TabsContext Tabs.List = function TabList({ children }) { return

{children}

} Tabs.Tab = function Tab({ id, children }) { const { active, setActive } = ???(TabsContext) return ( ) } Tabs.Panel = function TabPanel({ id, children }) { const { ??? } = useContext(TabsContext) // Only render when this panel is active return ??? === id ?

{children}

: null } // Usage: // // // // Specials // // // ... // // ─── TODO 3: HOC → Custom Hook ────────────────────────────── // Legacy HOC pattern: // function withAuth(Component) { // return function(props) { // const user = useUser() // if (!user) return // return // } // } // Modern custom hook pattern — replace withAuth: function useRequireAuth() { // TODO: get user from context/store // if no user, navigate to /login // return the user const user = { name: 'Jordan', role: 'Barista' } // mock return user } // Usage in component (no HOC needed): function Dashboard() { const user = useRequireAuth() if (!user) return null // hook handles redirect return

Welcome, {user.name}!

} // ─── App demo ────────────────────────────────────────────── function App() { const [rating, setRating] = useState(4) return (

Controlled StarRating

Rating: {rating}/5

Compound Tabs

Espresso Cappuccino

Rich and concentrated — £2.50

Creamy and balanced — £3.50

) } export default App