Loogiline väärtus Reacti olekus

Teeme oleku inCart, mis näitab, kas toode on ostukorvis või mitte:

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

Väärtus false tähendagu, et toode ei ole ostukorvis, ja väärtus true - et on ostukorvis. Kuvame selle kohta teabe ternaaroperaatori abil:

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

Teeme nüüd nupu, mille vajutamisel lisatakse toode ostukorvi:

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

Muudame oma koodi nii, et esimene vajutus nupule lisab ostukorvi ja teine - eemaldab sealt:

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