Nilai Boolean dalam State di React

Mari kita buat state inCart yang akan menunjukkan sama ada produk berada dalam troli atau tidak:

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

Katakan nilai false bermakna produk tidak dalam troli, dan nilai true - bermakna dalam troli. Mari paparkan maklumat tentang ini dengan menggunakan operator ternary:

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

Dan sekarang mari kita buat butang, yang apabila ditekan akan menambahkan produk ke dalam troli:

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

Mari ubah suai kod kita supaya klik pertama pada butang menambahkan ke troli, dan klik kedua - mengeluarkannya daripadanya:

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