Zaškrtávací políčka

Zaškrtávací políčko není text: buď je zaškrtnuté, nebo není. Jeho stav je proto booleovská hodnota, true, nebo false, a místo value se řídí atributem checked:

import { useState } from "react";

export default function App() {
    const [parkovani, setParkovani] = useState(false);
    const cenaParkovani = parkovani ? 300 : 0;

    return (
        <main>
            <div className="zaskrtnuti">
                <input
                    id="parkovani"
                    type="checkbox"
                    checked={parkovani}
                    onChange={(event) => setParkovani(event.target.checked)}
                />
                <label htmlFor="parkovani">Přijedu autem</label>
            </div>
            {parkovani && <p>Vaše parkoviště: P2</p>}
            <p>Parkování: {cenaParkovani} Kč</p>
        </main>
    );
}

event.target.checked je true, když kliknutí políčko právě zaškrtlo, a false, když ho odškrtlo. event.target.value tu nepoužívejte: hodnota zaškrtávacího políčka je text "on", ať je zaškrtnuté, nebo ne.

Booleovská hodnota ve stavu se dobře hodí k tomu, co znáte z lekce Seznamy a podmínky. Část stránky, která tam je, jen když je políčko zaškrtnuté, použije &&, a hodnota, která na políčku závisí, použije ? :. V příkladu se parkoviště ukáže jen tomu, kdo přijede autem, a parkování stojí 300, nebo 0 Kč. Obojí se spočítá z parkovani při každém vykreslení, takže se to změní s každým kliknutím na políčko.