Boolsk verdi i state i React

La oss lage en state inCart som viser om produktet er i handlekurven eller ikke:

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

La verdien false bety at produktet ikke er i handlekurven, og verdien true - at det er i handlekurven. La oss vise denne informasjonen ved hjelp av et ternært operatør:

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

La oss nå lage en knapp som legger til produktet i handlekurven når den klikkes:

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

La oss modifisere koden vår slik at det første klikket på knappen legger til i handlekurven, og det andre fjerner fra den:

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