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>;
}