Valor booleano no estado no React

Vamos criar um estado inCart que irá mostrar se o produto está ou não no carrinho:

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

Suponha que o valor false signifique que o produto não está no carrinho, e o valor true - que está no carrinho. Vamos exibir essa informação usando um operador ternário:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'no carrinho' : 'não no carrinho'}</span>
  </div>;
}

Agora vamos fazer um botão que, ao ser clicado, adiciona o produto ao carrinho:

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

Vamos modificar nosso código para que o primeiro clique no botão adicione ao carrinho, e o segundo clique remova dele:

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