Adding to an Array

State can hold an array too. Here's "My schedule", the bands you don't want to miss. The state keeps their ids, and it starts as an empty array:

const [schedule, setSchedule] = useState([]);

To add a band, you might reach for push(). Don't. push() changes the array that React keeps, and React doesn't notice: it sees a change only when the setter gets a different value than the state had, and the same array, even with one more item, isn't a different value. So never change a value that's in state. Make a new array, and give that to the setter.

Spread from the JavaScript course makes one: [...schedule, id] is a new array with everything in schedule, and id at the end. It's made from the old array, so it goes into an updater function:

function handleAdd(id) {
    setSchedule((schedule) => [...schedule, id]);
}

To show the schedule, find the bands whose ids are in it, while rendering:

const myBands = bands.filter((band) => schedule.includes(band.id));

<ul className="schedule">
    {myBands.map((band) => (
        <li key={band.id}>{band.name}</li>
    ))}
</ul>

Why ids, and not the whole band objects? The data about the bands stays in one place, in bands, and the state holds only what the visitor chose. On each render, filter() puts the two together.