Booleaanse waarde in state in React
Laten we een state inCart maken die
laat zien of een product in de winkelwagen zit of niet:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
</div>;
}
Laat de waarde false betekenen dat het product
niet in de winkelwagen zit, en de waarde true - dat het
in de winkelwagen zit. Laten we deze informatie weergeven met behulp van
de ternaire operator:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'in winkelwagen' : 'niet in winkelwagen'}</span>
</div>;
}
Laten we nu een knop maken waarop, wanneer erop wordt geklikt, het product aan de winkelwagen wordt toegevoegd:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'in winkelwagen' : 'niet in winkelwagen'}</span>
<button onClick={() => setInCart(true)}>btn</button>
</div>;
}
Laten we onze code aanpassen zodat de eerste klik op de knop toevoegt aan de winkelwagen, en de tweede - verwijdert uit de winkelwagen:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'in winkelwagen' : 'niet in winkelwagen'}</span>
<button onClick={() => setInCart(!inCart)}>btn</button>
</div>;
}
Maak een knop waarop klikken een gebruiker verbiedt en een knop waarop klikken een gebruiker toegang herstelt.
Pas de vorige taak zo aan dat van de twee knoppen altijd alleen de bijbehorende zichtbaar is. Dat wil zeggen, als een gebruiker verbannen is, is alleen de knop voor het herstellen zichtbaar, en als deze niet verbannen is - de knop voor het verbannen.
