Objects and Arrays

Apps rarely write their data straight into JSX. The data is usually in an array of objects, loaded from a server or kept in a file, like the festival's bands at the top of App.jsx:

const bands = [
    { id: 1, name: "Night Trains", stage: "Main Stage", day: "Friday", time: "20:00", genre: "rock" },
    { id: 2, name: "Lunar Cats", stage: "Tent", day: "Friday", time: "18:30", genre: "pop" },
    // …
];

Props can be values from the array: name={bands[0].name}. But with more fields, every card gets long. A prop can be any value, a whole object too, so you can pass the band as a single prop:

<BandCard band={bands[0]} />

The card then takes the prop band and reads the band's properties:

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

Which way is better? Separate props such as name and stage show at once what the component needs, and they work with any data, even text written straight into JSX. A single object is shorter when the data already is an object and the component needs most of its fields. You'll see both in React code.

An array can be a prop, too. A component with a list of stages, for example, can show them separated by commas, with join():

<StageList stages={["Main Stage", "Tent", "Forest Stage"]} />

export default function StageList({ stages }) {
    return <p>Stages: {stages.join(", ")}</p>;
}

Stages: Main Stage, Tent, Forest Stage

Writing bands[0], bands[1] and so on for every card is tedious, and when a band is added, you have to add a line. The next lesson shows how to make a card for every element of an array. For now, write the cards one by one.