Nilai Boolean dalam State di React

Mari buat state inCart yang akan menunjukkan apakah produk berada dalam keranjang atau tidak:

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

Biarkan nilai false berarti produk tidak berada dalam keranjang, dan nilai true berarti berada dalam keranjang. Tampilkan informasi tentang ini dengan menggunakan operator ternary:

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

Sekarang mari buat tombol yang, ketika ditekan, akan menambahkan produk ke keranjang:

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

Mari modifikasi kode kita sehingga penekanan pertama pada tombol menambahkan ke keranjang, dan penekanan kedua menghapusnya dari keranjang:

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