What you will learn
- Pass data into components using props
- Render a list of components from an array with map
- Give list items stable, unique keys
Props are how a parent component passes data to a child, much like attributes on an HTML element. <ProductCard name="Croissant" price={250} /> passes two props. The component receives them as one object, and destructuring keeps it readable: function ProductCard({ name, price }) { ... }. Props flow in one direction, from parent to child, and a component should treat them as read-only.
The children prop holds whatever you put between a component's opening and closing tags. This is useful for wrapper components such as a Card or Section that add layout and styling around any content. With TypeScript, you can describe the shape of props in a type, so your editor warns you when a prop is missing or has the wrong kind of value.
To render a list, use the array method map inside JSX: {products.map((product) => <ProductCard key={product.id} {...product} />)}. Each item needs a key prop that is unique among its siblings and stays the same between renders, usually an ID from the data. React uses keys to track which items changed. Avoid using the array index as the key if items can be reordered or removed.