Summary

In this lesson, you learned that:

• Props pass data from a parent to a component. They're written like attributes, <BandCard name="Night Trains" stage="Main Stage" />, and React passes them to the component as one object, props.
• Components destructure their props in the parameters: function BandCard({ name, stage }). The names must match exactly. A prop that nobody passed is undefined, and React shows nothing for it.
• Text goes in quotes, any other value in curly braces: likes={128}, headliner={true}, or just headliner for true. Before its return, a component can run any JavaScript, for example an if that chooses a class.
• A prop can be an object, band={bands[0]}, read as band.name, or an array, days={["Friday", "Saturday"]}.
• A default value stands in for a missing prop: { stage = "To be announced" }. It's used only when the prop is undefined.
• What's between a component's tags is the prop children: <Card>…</Card> can wrap any content.
• Props are read-only. The parent decides, and the component never changes its props; a value made from them goes into a new variable.

In the next lesson, Lists and Conditions, you'll make a card for every band in the array with map, instead of writing the cards one by one, and show parts of a card only when a condition holds.

But first, a little practice: notices for the festival's visitors. Notice.jsx is empty, and you'll write the component yourself.