रिएक्ट में चेकबॉक्स और सशर्त रेंडरिंग

आइए ऐसा करें कि चेकबॉक्स के चिह्नित होने के आधार पर, स्क्रीन पर या तो एक कोड का टुकड़ा दिखाई दे, या दूसरा। इसके लिए हम सशर्त रेंडरिंग का उपयोग करेंगे:

function App() {
	const [checked, setChecked] = useState(true);
	
	let message;
	if (checked) {
		message = <p>संदेश 1</p>;
	} else {
		message = <p>संदेश 2</p>;
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<div>{message}</div>
	</div>;
}

एक चेकबॉक्स दिया गया है। चेकबॉक्स की सहायता से उपयोगकर्ता से पूछें कि क्या उसकी उम्र पहले से ही 18 वर्ष है। यदि चेकबॉक्स चिह्नित है, तो उपयोगकर्ता को निम्नलिखित कोड ब्लॉक दिखाएं:

<div>
	<h2>हुर्रे, आपकी उम्र 18 वर्ष से अधिक है</h2>
	<p>
		यहां केवल वयस्कों के लिए सामग्री रखी गई है
	</p>
</div>

और यदि चेकबॉक्स चिह्नित नहीं है - तो यह:

<div>
	<p>
		अफसोस, आपकी उम्र अभी 18 वर्ष नहीं है:(
	</p>
</div>

एक चेकबॉक्स और एक पैराग्राफ दिया गया है। यदि चेकबॉक्स चिह्नित है, तो पैराग्राफ स्क्रीन पर दिखाई देना चाहिए, और यदि चिह्नित नहीं है - तो इसे छिपा दें।