Booleovské hodnoty ve stavu

Stav, který je true, nebo false, se hodí na všechno, co je buď zapnuté, nebo vypnuté: podrobnosti jsou vidět, nebo ne; kapela je mezi oblíbenými, nebo není; nabídka je otevřená, nebo zavřená.

const [otevrene, setOtevrene] = useState(false);

function prepniPodrobnosti() {
    setOtevrene(!otevrene);
}

return (
    <article className="karta">
        <h2>Plecháčci</h2>
        <button onClick={prepniPodrobnosti}>
            {otevrene ? "Skrýt podrobnosti" : "Ukázat podrobnosti"}
        </button>
        {otevrene && <p>Stan, sobota 21:00</p>}
    </article>
);

!otevrene je opak toho, co tam je teď: z false se stane true a z true se stane false. Jedno tlačítko tak podrobnosti otevře a to samé tlačítko je zase zavře.

O tom, co stránka ukáže, rozhodují podmínky z lekce Seznamy a podmínky: ? : vybere text tlačítka a && ukáže odstavec jen tehdy, když je otevrene rovno true. Když je false, odstavec není skrytý: na stránce vůbec není.

Takhle aplikace v Reactu obvykle fungují. Stav říká, jak se věci mají, a JSX popisuje, jak stránka v každém případě vypadá. Prvky sami nepřidáváte ani neodebíráte. Změníte stav a zbytek udělá React.

Booleovská hodnota může vybrat i třídu, aby CSS prvek obarvilo jinak:

<article className={oblibena ? "karta oblibena" : "karta"}>

Booleovské proměnné pojmenujte tak, aby se název dal číst jako otázka s odpovědí ano, nebo ne: otevrene, oblibena, prihlaseny. Pak se otevrene && … čte skoro jako věta.