Only Friday

Often you don't want every element of the array, only some of them: Friday's bands, the bands on the Main Stage, the rock bands. You know filter() from the JavaScript course: it makes a new array of the elements for which its function returns true. So filter first, and then map() what's left:

export default function App() {
    const mainStage = bands.filter((band) => band.stage === "Main Stage");

    return (
        <section>
            <h2>Main Stage</h2>
            {mainStage.map((band) => (
                <BandCard key={band.id} band={band} />
            ))}
        </section>
    );
}

Filter in the component before return, where you can write any JavaScript, and store the result in a constant whose name says what's in it. You could also chain the two methods right in the JSX, {bands.filter(…).map(…)}, but with a name, the code is easier to read.

filter() doesn't change the original array, so you can filter the same bands in several ways on one page: for each stage, for each day. Each filter() makes an array of its own.

A typical mistake is a single = in the condition. (band) => band.day = "Friday" doesn't compare, it assigns: the function changes every band's day to Friday and returns the text "Friday", which counts as true. So all the bands show, and all on Friday.