Reactda holatdagi mantiqiy qiymat

Keling, mahsulot savatda bormi yo'qmi ekanligini ko'rsatadigan inCart holatini yarataylik:

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

false qiymati mahsulot savatda emasligini, true qiymati esa savatda ekanligini bildirsin. Buni ternar operator yordamida chiqaramiz:

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

Endi bosilganda mahsulot savatga qo'shiladigan tugma yarataylik:

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

Kodimizni shunday o'zgartiramizki, birinchi marta tugma bosilganda savatga qo'shilsin, ikkinchi marta bosilganda esa savatdan olib tashlansin:

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