Passing Props

The lineup has been announced! Each card should now show its own band. A component gets data from the component that uses it through props, short for properties. You write them like attributes in HTML:

<BandCard name="Night Trains" stage="Main Stage" />
<BandCard name="Lunar Cats" stage="Tent" />

React puts all the props of a card into one object and passes it to the component's function as its argument. The parameter is usually called props, and the component reads the props from it as properties of an object:

export default function BandCard(props) {
    return (
        <article className="card">
            <h3>{props.name}</h3>
            <p>{props.stage}</p>
        </article>
    );
}

The function is the same for every card, but each call gets other props. For the first card, props is { name: "Night Trains", stage: "Main Stage" }, and for the second { name: "Lunar Cats", stage: "Tent" }. You can see it for yourself: put console.log(props); into the component, and the console shows one line for each card:

{ name: "Night Trains", stage: "Main Stage" }
{ name: "Lunar Cats", stage: "Tent" }

It's the same idea as the parameters of a function in JavaScript: the function is written once, and whoever calls it decides with what. Here, that's the parent: the component whose JSX has the <BandCard … />. The parent decides what each card shows.

You choose the names of props yourself. Just make sure that the parent and the component spell them the same way: name and Name are two different props.