Reactda holatdagi mantiqiy qiymat
Keling, mahsulot savatda bormi yo'qmi ekanligini ko'rsatadigan
inCart holatini yarataylik:
function 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:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'savatda' : 'savatda emas'}</span>
</div>;
}
Endi bosilganda mahsulot savatga qo'shiladigan tugma yarataylik:
function 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:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'savatda' : 'savatda emas'}</span>
<button onClick={() => setInCart(!inCart)}>tugma</button>
</div>;
}
Foydalanuvchini bloklaydigan va blokdan chiqaradigan tugmalarni yarating.
Oldingi vazifani shunday o'zgartiringki, ikkala tugmadan faqat tegishlisi ko'rinsin. Ya'ni, agar foydalanuvchi bloklangan bo'lsa, blokdan chiqarish tugmasi ko'rinsin, agar bloklanmagan bo'lsa - bloklash tugmasi ko'rinsin.
