Reactда стейтдаги логик қиймат
Келгинг, стейтда inCart ни яратайлик, у
маҳсулот саватда борми ёки йўқмилигини кўрсатади:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
</div>;
}
false қиймат маҳсулот саватда эмаслигини,
true қиймат эса саватда борини билдирсин. Бу ҳақидаги маълумотни
тернар оператори ёрдамида чиқарайлик:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'саватда' : 'саватда эмас'}</span>
</div>;
}
Энди босилганида маҳсулот саватга қўшиладиган тугма ясайлик:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'саватда' : 'саватда эмас'}</span>
<button onClick={() => setInCart(true)}>btn</button>
</div>;
}
Бизнинг кодни шундай модификация қилайликки, биринчи босилганда тугма саватга қўшса, иккинчи босилганда - ундан ўчирилсин:
function App() {
const [inCart, setInCart] = useState(false);
return <div>
<span>{inCart ? 'саватда' : 'саватда эмас'}</span>
<button onClick={() => setInCart(!inCart)}>btn</button>
</div>;
}
Фойдаланувчини бан қиладиган ва бандан чиқарадиган тугма ясанг.
Олдинги вазифани шундай модификация қилингки, икки тагина тугмадан ҳар доим фақат мос келувчиси кўриниб турсин. Яъни, агар фойдаланувчи бан қилинганида бандан чиқарувчи тугма кўриниб турсин, агар бан қилинмаганида эса бан қилувчи тугма кўриниб турсин.
