Quiz: Eine Liste, die sich nicht filtern lässt

1import { useState } from "react";
2
3const bands = [
4    { id: 1, name: "Nachtzüge" },
5    { id: 2, name: "Mondkatzen" },
6    { id: 3, name: "Eulenchor" },
7];
8
9export default function App() {
10    const [suche, setSuche] = useState("");
11    const [gezeigteBands] = useState(bands.filter((band) => band.name.includes(suche)));
12
13    return (
14        <main>
15            <h1>Sommerklang</h1>
16            <input
17                value={suche}
18                onChange={(event) => setSuche(event.target.value)}
19            />
20            <ul>
21                {gezeigteBands.map((band) => (
22                    <li key={band.id}>{band.name}</li>
23                ))}
24            </ul>
25        </main>
26    );
27}