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)}>түйме</button>
  </div>;
}

Бірінші рет түймені басқанда өнім себетке қосылып, ал екінші рет басқанда ол жойылатындай етіп кодты өзгертейік:

jsxfunction App() {
  const [inCart, setInCart] = useState(false);
  
  return <div>
    <span>{inCart ? 'себетте' : 'себетте емес'}</span>
    <button onClick={() => setInCart(!inCart)}>түйме</button>
  </div>;
}