Loading the Showtimes

Now the showtimes page. The showtimes come from showtimes.json, as in the showtimes project, only now an effect loads them, as in the Effects lesson. They're state, an empty array at first, and the effect, with the dependencies [], loads the file when Showtimes appears:

const [showtimes, setShowtimes] = useState([]);

useEffect(() => {
    async function loadShowtimes() {
        const response = await fetch("showtimes.json");
        setShowtimes(await response.json());
    }
    loadShowtimes();
}, []);

In the table, map() makes a row for each showtime, with its id as the key: four cells with the day, the time, the film and the hall, and a fifth one with the Choose seats button. In the project The Cinema in Tailwind, the script gave that button its classes with button.className = "…". In JSX, you write them right on the button, as on any other element.

Each time you open the showtimes, Showtimes appears on the page again, so its effect runs again and loads the file again. When you go home, React takes the component off the page, and its state with it. That's fine here: the file is small, and the showtimes could have changed in the meantime.

While the file is on its way, the page says Loading…, and if the server answers with an error, it says so, as the old page did. That's two more pieces of state, loading and error, as in the Effects lesson. Check response.ok before you read the data.