Logiese waarde in toestand in React

Laat ons 'n toestand inCart skep wat sal wys of die produk in die mandjie is of nie:

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

Laat die waarde false beteken dat die produk nie in die mandjie is nie, en die waarde true - dat dit in die mandjie is. Laat ons hierdie inligting uitskryf met behulp van die ternêre operator:

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

En nou maak ons 'n knoppie waarop, wanneer daarop geklik word, die produk by die mandjie gevoeg sal word:

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

Laat ons ons kode wysig sodat die eerste klik op die knoppie by die mandjie voeg, en die tweede - dit daaruit verwyder:

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