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