Valor booleano en el estado en React

Hagamos un estado inCart que muestre si el producto está en el carrito o no:

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

Dejemos que el valor false signifique que el producto no está en el carrito, y el valor true - que está en el carrito. Mostremos esta información usando el operador ternario:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'en el carrito' : 'no en el carrito'}</span>
  </div>;
}

Y ahora hagamos un botón, al hacer clic en el cual el producto se agregará al carrito:

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

Modifiquemos nuestro código para que el primer clic en el botón agregue al carrito, y el segundo - lo elimine de él:

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