React တွင် State အတွင်းရှိ ယုတ္တိတန်သော တန်ဖိုး

ထည့်သွင်းစဉ်းစားကြပါစို့။ product သည် ဈေးခြင်းထဲတွင် ရှိ/မရှိ ပြသမည့် state <inCart> ကို ဖန်တီးကြပါစို့။

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

<false> တန်ဖိုးသည် product သည် ဈေးခြင်းထဲမှ မဟုတ်ကြောင်း၊ <true> တန်ဖိုးသည် ဈေးခြင်းထဲတွင် ရှိကြောင်း ဆိုလိုပါစေ။ ternary operator ကို အသုံးပြု၍ ဤအချက်အလက်ကို ထုတ်ပြကြပါစို့။

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'ဈေးခြင်းထဲတွင်' : 'ဈေးခြင်းထဲတွင် မဟုတ်'}</span>
	</div>;
}

ယခုအခါ နှိပ်လိုက်သည့်အခါ product ကို ဈေးခြင်းထဲသို့ ထည့်ပေးမည့် ခလုတ်တစ်ခု ဖန်တီးကြပါစို့။

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'ဈေးခြင်းထဲတွင်' : 'ဈေးခြင်းထဲတွင် မဟုတ်'}</span>
		<button onClick={() => setInCart(true)}>ခလုတ်</button>
	</div>;
}

ကျွန်ုပ်တို့၏ကုဒ်ကို ပြုပြင်မွမ်းမံပြီး ပထမအကြိမ် နှိပ်လိုက်ခြင်းသည် ဈေးခြင်းထဲသို့ ထည့်ပေးပြီး၊ ဒုတိယအကြိမ် နှိပ်လိုက်ခြင်းသည် ယင်းကို ဈေးခြင်းထဲမှ ဖယ်ရှားပေးသည့် ပုံစံဖြစ်အောင် လုပ်ဆောင်ကြပါစို့။

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'ဈေးခြင်းထဲတွင်' : 'ဈေးခြင်းထဲတွင် မဟုတ်'}</span>
		<button onClick={() => setInCart(!inCart)}>ခလုတ်</button>
	</div>;
}

အသုံးပြုသူကို တားမြစ် (ban) ပေးမည့် ခလုတ်နှင့် အသုံးပြုသူ၏ တားမြစ်ခြင်းကို ပြန်လည်ရုပ်သိမ်း (unban) ပေးမည့် ခလုတ်ကို ဖန်တီးပါ။

ယခင်လုပ်ဆောင်ချက်ကို ပြုပြင်မွမ်းမံပြီး ခလုတ်နှစ်ခုအနက် အမြဲတမ်း သက်ဆိုင်ရာ ခလုတ်တစ်ခုတည်းကိုသာ မြင်ရစေပါ။ ဆိုလိုသည်မှာ အသုံးပြုသူကို တားမြစ်ထားပါက တားမြစ်ခြင်းပြန်လည်ရုပ်သိမ်းရန် ခလုတ်ကိုသာ မြင်ရမည်။ အသုံးပြုသူကို တားမြစ်မထားပါက တားမြစ်ရန် ခလုတ်ကိုသာ မြင်ရမည် ဖြစ်သည်။