रिएक्ट में स्टेट में बूलियन मान

आइए एक स्टेट 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>;
}

एक बटन बनाएं, जिस पर क्लिक करने से उपयोगकर्ता को बैन कर दिया जाए और एक बटन बनाएं, जिस पर क्लिक करने से उपयोगकर्ता को अनबैन कर दिया जाए।

पिछले कार्य को इस तरह संशोधित करें कि दो बटनों में से हमेशा केवल संबंधित बटन दिखाई दे। यानी, यदि उपयोगकर्ता बैन है, तो अनबैन करने का बटन दिखाई दे, और यदि बैन नहीं है - तो बैन करने का बटन दिखाई दे।