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>;
}

একটি বাটন তৈরি করুন, যাতে ক্লিক করলে ব্যবহারকারীকে নিষিদ্ধ করা হবে এবং একটি বাটন, যাতে ক্লিক করলে ব্যবহারকারীর নিষেধাজ্ঞা তুলে নেওয়া হবে।

পূর্ববর্তী কাজটি এমনভাবে পরিবর্তন করুন যাতে দুটি বাটনের মধ্যে সর্বদা শুধুমাত্র সংশ্লিষ্টটি দৃশ্যমান থাকে। অর্থাৎ, যদি ব্যবহারকারী নিষিদ্ধ থাকে, তবে দৃশ্যমান হবে নিষেধাজ্ঞা তুলে নেওয়ার বাটন, এবং যদি নিষিদ্ধ না থাকে - তবে নিষিদ্ধ করার বাটন।