// Lesson 07 — Lists & Keys import { useState } from 'react' const MENU = [ { id: 1, name: 'Espresso', price: 2.50, category: 'coffee' }, { id: 2, name: 'Cappuccino', price: 3.50, category: 'coffee' }, { id: 3, name: 'Cold Brew', price: 3.50, category: 'coffee' }, { id: 4, name: 'Croissant', price: 2.00, category: 'food' }, { id: 5, name: 'Matcha Latte',price: 4.00, category: 'tea' }, { id: 6, name: 'Sandwich', price: 4.50, category: 'food' }, ] // TODO 1: MenuCard component function MenuCard({ name, price, category }) { return (

{name}

£{price.toFixed(2)}

{category}

) } // TODO 2: Filterable menu function FilterableMenu() { const [category, setCategory] = useState('all') // TODO: derive visible items — no extra useState! // filter by category === 'all' OR item.category === category const visible = ??? const categories = ['all', 'coffee', 'food', 'tea'] return (

{/* TODO: render filter buttons — set active style on current category */}

{categories.map(cat => ( ))}

{visible.length} items

{/* TODO: render visible items with map() — use item.id as key */}

{visible.???(item => ( ))}

) } // TODO 3: Dynamic list — add and remove items function ShoppingList() { const [items, setItems] = useState(['Coffee beans', 'Milk', 'Sugar']) const [input, setInput] = useState('') const addItem = (e) => { e.preventDefault() if (!input.trim()) return // TODO: add item to state — create new array, use input as id or text setItems(prev => ???) setInput('') } const removeItem = (index) => { // TODO: remove item by index — but should we use index as key? setItems(prev => ???) } return (

{item}

) } export default FilterableMenu