Булева стойност в състоянието в 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>;
}