Looginen arvo tilassa Reactissa

Tehdään tila inCart, joka näyttää, onko tuote ostoskorissa vai ei:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    
  </div>;
}

Olkoon arvo false tarkoittaa, että tuote ei ole ostoskorissa, ja arvo true - että on ostoskorissa. Näytetään tieto tästä ternäärioperaattorin avulla:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'ostoskorissa' : 'ei ostoskorissa'}</span>
  </div>;
}

Tehdään nappi, jota painamalla tuote lisätään ostoskoriin:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'ostoskorissa' : 'ei ostoskorissa'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Muokataan koodiamme niin, että ensimmäinen painallus napista lisää ostoskoriin, ja toinen - poistaa sen sieltä:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'ostoskorissa' : 'ei ostoskorissa'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}