Quiz: A List That Won't Filter

Typing into the field should show only the bands whose name contains the text, but the list always shows all three of them. Click the line with the mistake.

import { useState } from "react";

const bands = [
    { id: 1, name: "Night Trains" },
    { id: 2, name: "Lunar Cats" },
    { id: 3, name: "Owl Choir" },
];

export default function App() {
    const [search, setSearch] = useState("");
    const [shownBands] = useState(bands.filter((band) => band.name.includes(search)));

    return (
        <main>
            <h1>Summer Sounds</h1>
            <input
                value={search}
                onChange={(event) => setSearch(event.target.value)}
            />
            <ul>
                {shownBands.map((band) => (
                    <li key={band.id}>{band.name}</li>
                ))}
            </ul>
        </main>
    );
}

Start programming for free

Back

4/6