রিএ্যাক্টে চেকবক্স এবং শর্তসাপেক্ষ রেন্ডারিং

আসুন এমন করি যাতে চেকবক্স চিহ্নিত করার উপর নির্ভর করে, পর্দায় হয় এক কোডের টুকরো, না হয় অন্য টুকরোটি প্রদর্শিত হয়। এর জন্য আমরা শর্তসাপেক্ষ রেন্ডারিং ব্যবহার করব:

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 years হয়েছে কিনা। যদি চেকবক্সটি চিহ্নিত থাকে, তবে ব্যবহারকারীকে নিম্নলিখিত কোড ব্লকটি দেখান:

<div>
	<h2>হুররে, আপনার বয়স ইতিমধ্যেই ১৮ হয়েছে</h2>
	<p>
		এখানে শুধুমাত্র প্রাপ্তবয়স্কদের জন্য কন্টেন্ট রয়েছে
	</p>
</div>

আর যদি চেকবক্স চিহ্নিত না থাকে - তবে নিম্নলিখিতটি:

<div>
	<p>
		হায়, আপনার বয়স এখনও ১৮ বছর হয়নি:(
	</p>
</div>

একটি চেকবক্স এবং একটি অনুচ্ছেদ দেওয়া আছে। যদি চেকবক্সটি চিহ্নিত থাকে, তবে অনুচ্ছেদটি পর্দায় দৃশ্যমান থাকবে, আর যদি চিহ্নিত না থাকে - তবে এটি লুকিয়ে দিন।