The Booking Form

The seat picker has its form now, under the summary: the Name and Email fields and the Book button, turned into JSX (where for has become htmlFor and novalidate noValidate). Bring it to life as in the Forms lesson: the fields are controlled, with the states name and email, and the form calls handleSubmit, which starts with event.preventDefault().

Checking. Then handleSubmit checks the form, one thing after another, as in the exercise Error Messages: an empty name, an email without @, no seat selected. The first problem goes into the state error, which the form shows, and return ends the handler, so nothing is booked. The visitor fixes it and clicks Book again. The old page showed all three messages at once. This way, there's one message, under the button, and the code is shorter.

Booking. When everything's right, the picker makes a ticket: an object with an id from Date.now(), the showtime, the seats, the name and the email. But where does it go? The tickets are needed by the picker, to show the booked seats as taken, and by the list Your tickets in Showtimes. So they're state of Showtimes, tickets, and the picker gets them in its props, with a function that adds one, as the form for your own words did in the Final Project of the React course:

onBook({
    id: Date.now(),
    showtime: showtime,
    seats: selected,
    name: name.trim(),
    email: email.trim(),
});

A ticket keeps the whole showtime, so that the list can show its day, time and film. Then the picker empties selected and both fields. The booked seats are taken from now on: isTaken() also checks with some() whether one of the tickets for this showtime has the seat, as the old script did:

return tickets.some(
    (ticket) =>
        ticket.showtime.id === showtime.id && ticket.seats.includes(seat),
);

Finally, the picker says which seats were booked, Booked! Your seats: A3, A4, in one more state, confirmation. Its text can come from selected even after setSelected([]): as you know from the State lesson, the new value only comes with the next render.