React'ta State'de Mantıksal Değer

Ürünün sepette olup olmadığını gösterecek inCart state'ini oluşturalım:

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

false değeri ürünün sepette olmadığını, true değeri ise sepette olduğunu göstersin. Bununla ilgili bilgiyi üçlü operatör kullanarak gösterelim:

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

Şimdi de tıklandığında ürünü sepete ekleyen bir buton yapalım:

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

Kodumuzu, ilk tıklamanın sepete eklediği, ikinci tıklamanın ise sepetten çıkardığı şekilde değiştirelim:

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