Components Inside Components

Not only App can use other components: any component can. The lineup is a list of bands, and each band gets a card. The card is a component of its own, BandCard, and Lineup uses it, just as App uses Lineup:

// Lineup.jsx
import BandCard from "./BandCard.jsx";

export default function Lineup() {
    return (
        <section>
            <h2>Lineup</h2>
            <div className="cards">
                <BandCard />
                <BandCard />
            </div>
        </section>
    );
}

The components make a tree, like HTML elements inside each other: App has Header and Lineup, and Lineup has the cards:

App
├── Header
└── Lineup
    ├── BandCard
    └── BandCard

Each file imports the components it uses itself, and only those. Lineup.jsx imports BandCard, and App.jsx doesn't need to know about it. The path "./BandCard.jsx" starts from the file the import is in, here Lineup.jsx.

And a component can be used as many times as you like. Each <BandCard /> calls the function again and adds another card to the page. That's what makes components so useful: you write the card once, and when you change it, every card on the page changes with it.

For now, all the cards are the same, because the bands haven't been announced yet. In the next lesson, each card gets its own band.

This time, you'll work in BandCard.jsx and Lineup.jsx. App.jsx and Header.jsx are done.