Kontrollkästchen

Ein Kontrollkästchen ist kein Text: Es ist angehakt oder nicht. Sein State ist also ein Wahrheitswert, true oder false, und statt mit value wird es mit checked kontrolliert:

import { useState } from "react";

export default function App() {
    const [auto, setAuto] = useState(false);
    const parkplatzPreis = auto ? 15 : 0;

    return (
        <main>
            <div className="haken">
                <input
                    id="auto"
                    type="checkbox"
                    checked={auto}
                    onChange={(event) => setAuto(event.target.checked)}
                />
                <label htmlFor="auto">Ich komme mit dem Auto</label>
            </div>
            {auto && <p>Dein Parkplatz: P2</p>}
            <p>Parken: {parkplatzPreis} €</p>
        </main>
    );
}

event.target.checked ist true, wenn der Klick das Kästchen gerade angehakt hat, und false, wenn er den Haken entfernt hat. Verwende hier nicht event.target.value: Der Wert eines Kontrollkästchens ist der Text "on", angehakt oder nicht.

Ein Wahrheitswert im State passt gut zu dem, was du aus der Lektion Listen und Bedingungen kennst. Ein Teil der Seite, der nur da ist, solange das Kästchen angehakt ist, verwendet &&, und ein Wert, der vom Kästchen abhängt, verwendet ? :. Im Beispiel erscheint der Parkplatz nur bei denen, die mit dem Auto kommen, und der Preis fürs Parken ist 15 oder 0. Beides wird bei jedem Rendern aus auto berechnet, ändert sich also mit jedem Klick auf das Kästchen.