Boolsk verdi i state i React
La oss lage en state inCart som
viser om produktet er i handlekurven eller ikke:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
</div>;
}
La verdien false bety at produktet
ikke er i handlekurven, og verdien true - at det
er i handlekurven. La oss vise denne informasjonen ved hjelp av
et ternært operatør:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'i handlekurven' : 'ikke i handlekurven'}</span>
</div>;
}
La oss nå lage en knapp som legger til produktet i handlekurven når den klikkes:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'i handlekurven' : 'ikke i handlekurven'}</span>
<button onClick={() => setInCart(true)}>btn</button>
</div>;
}
La oss modifisere koden vår slik at det første klikket på knappen legger til i handlekurven, og det andre fjerner fra den:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'i handlekurven' : 'ikke i handlekurven'}</span>
<button onClick={() => setInCart(!inCart)}>btn</button>
</div>;
}
Lag en knapp som klikk på vil utestenge brukeren og en knapp som klikk på vil oppheve utestengelsen av brukeren.
Modifiser forrige oppgave slik at av de to knappene alltid kun den aktuelle er synlig. Det vil si, hvis brukeren er utestengt, skal kun knappen for å oppheve utestengelsen være synlig, og hvis ikke utestengt - knappen for utestengelse.
