ช่องทำเครื่องหมายและการเรนเดอร์แบบมีเงื่อนไขใน React

มาทำให้ขึ้นอยู่กับการทำเครื่องหมายในช่องทำเครื่องหมาย โดยแสดงผลโค้ดส่วนหนึ่งหรืออีกส่วนหนึ่งบนหน้าจอ เราใช้ การเรนเดอร์แบบมีเงื่อนไขสำหรับสิ่งนี้:

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>

มีช่องทำเครื่องหมายและย่อหน้า หากช่องทำเครื่องหมายถูกเลือก ให้ย่อหน้านั้นมองเห็นได้บนหน้าจอ และหาก ไม่ถูกเลือก - ให้ซ่อนมัน