Booleskt värde i state i React

Låt oss skapa ett state inCart som visar om produkten finns i varukorgen eller inte:

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

Låt värdet false betyda att produkten inte finns i varukorgen, och värdet true - att den finns i varukorgen. Låt oss visa denna information med hjälp av ett ternärt uttryck:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'i varukorgen' : 'inte i varukorgen'}</span>
  </div>;
}

Och nu ska vi skapa en knapp som, när man klickar på den, lägger till produkten i varukorgen:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'i varukorgen' : 'inte i varukorgen'}</span>
    <button onClick={() => setInCart(true)}>btn</button>
  </div>;
}

Låt oss modifiera vår kod så att det första klicket på knappen lägger till i varukorgen, och det andra tar bort den från varukorgen:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'i varukorgen' : 'inte i varukorgen'}</span>
    <button onClick={() => setInCart(!inCart)}>btn</button>
  </div>;
}