Лагічнае значэнне ў стэйце ў 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>;
}