Логическое значение в стейте в 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>;
}