Removing from an Array

A schedule also needs a way to take a band out. Again, don't change the array that's in state: make a new one without the item. filter() does just that. It makes a new array of the items for which its function returns true:

function handleRemove(id) {
    setSchedule((schedule) => schedule.filter((bandId) => bandId !== id));
}

Every id that isn't id stays, so the new array has everything but the band you removed. Methods that change an array in place, like pop() or sort(), are as wrong for state as push(). Spread, filter() and map() make new arrays, so they're the ones to use. (When you need a sorted list, sort a copy: [...bands].sort(…).)

After a removal, the band is out of schedule, and everything that depends on it changes on the next render: myBands doesn't have it any more, and the condition from the last exercise shows its Add button again. That's one state, and the page follows it everywhere.

When the schedule is empty, the heading My schedule stands above nothing. That's a job for a condition from the Lists and Conditions lesson: with ? :, show either a paragraph with a message or the list, depending on schedule.length.