Logikai érték az állapotban Reactben
Készítsünk egy inCart állapotot, amely
megmutatja, hogy a termék a kosárban van-e vagy sem:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
</div>;
}
Legyen a false érték azt jelentő, hogy a termék
nincs a kosárban, a true érték pedig azt,
hogy a kosárban van. Jelenítsük meg ezt az információt a
ternáris operátor segítségével:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'a kosárban' : 'nincs a kosárban'}</span>
</div>;
}
Most készítsünk egy gombot, amelyre kattintva a termék hozzáadódik a kosárhoz:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'a kosárban' : 'nincs a kosárban'}</span>
<button onClick={() => setInCart(true)}>btn</button>
</div>;
}
Módosítsuk a kódunkat úgy, hogy az első kattintás a gombon hozzáadja a kosárhoz, a második pedig eltávolítsa onnan:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'a kosárban' : 'nincs a kosárban'}</span>
<button onClick={() => setInCart(!inCart)}>btn</button>
</div>;
}
Készíts egy gombot, amelyre kattintva a felhasználó ki lesz tiltva, és egy gombot, amelyre kattintva a felhasználó feloldásra kerül.
Módosítsd az előző feladatot úgy, hogy a két gomb közül mindig csak a megfelelő legyen látható. Azaz, ha a felhasználó ki van tiltva, akkor a feloldás gombja látszik, ha nincs kitiltva, akkor a tiltás gombja.
