Տրամաբանական արժեքը սթեյթում 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>;
}