Quiz: Always Friday

A click on Saturday should show Saturday's bands, but the list keeps showing Friday's, and the console shows no error. Click the line with the mistake.

import { useEffect, useState } from "react";

export default function App() {
    const [day, setDay] = useState("friday");
    const [bands, setBands] = useState([]);

    useEffect(() => {
        async function loadBands() {
            const response = await fetch(`${day}.json`);
            setBands(await response.json());
        }
        loadBands();
    }, []);

    return (
        <main>
            <h1>Summer Sounds</h1>
            <div className="days">
                <button onClick={() => setDay("friday")}>Friday</button>
                <button onClick={() => setDay("saturday")}>Saturday</button>
            </div>
            <ul className="lineup">
                {bands.map((band) => (
                    <li key={band.id}>
                        {band.time}: {band.name} ({band.stage})
                    </li>
                ))}
            </ul>
        </main>
    );
}

Start programming for free

Back

7/9