Logisk værdi i state i React

Lad os lave en state inCart, som vil vise om produktet er i indkøbskurven eller ej:

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

Lad værdien false betyde, at produktet ikke er i indkøbskurven, og værdien true - at det er i indkøbskurven. Lad os vise information om dette ved hjælp af en ternær operator:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'i indkøbskurven' : 'ikke i indkøbskurven'}</span>
  </div>;
}

Og lad os nu lave en knap, der ved klik tilføjer produktet til indkøbskurven:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'i indkøbskurven' : 'ikke i indkøbskurven'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Lad os modificere vores kode, så det første klik på knappen tilføjer til indkøbskurven, og det andet klik - fjerner den fra indkøbskurven:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'i indkøbskurven' : 'ikke i indkøbskurven'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}