ค่าบูลีนในสเตทของ React

มาสร้างสเตท inCart ที่จะแสดงว่าสินค้าอยู่ในตะกร้าหรือไม่:

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

ให้ค่า false หมายถึง สินค้าไม่ได้อยู่ในตะกร้า และค่า true หมายถึง อยู่ในตะกร้า แสดงข้อมูลนี้ด้วยโอเปอเรเตอร์เงื่อนไข:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'อยู่ในตะกร้า' : 'ไม่อยู่ในตะกร้า'}</span>
  </div>;
}

ทีนี้มาสร้างปุ่ม เมื่อกดแล้วสินค้าจะถูกเพิ่มลงในตะกร้า:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'อยู่ในตะกร้า' : 'ไม่อยู่ในตะกร้า'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

ปรับโค้ดของเราให้การกดปุ่มครั้งแรกเพิ่มสินค้าเข้าในตะกร้า และการกดครั้งที่สองนำสินค้าออกจากตะกร้า:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'อยู่ในตะกร้า' : 'ไม่อยู่ในตะกร้า'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}