Checkbox và Render có điều kiện trong React

Hãy làm sao để tùy thuộc vào việc đánh dấu checkbox, một đoạn mã này hoặc đoạn mã khác sẽ được hiển thị trên màn hình. Chúng ta sẽ sử dụng render có điều kiện:

function App() {
	const [checked, setChecked] = useState(true);
	
	let message;
	if (checked) {
		message = <p>thông báo 1</p>;
	} else {
		message = <p>thông báo 2</p>;
	}
	
	return <div>
		<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
		<div>{message}</div>
	</div>;
}

Cho một checkbox. Sử dụng checkbox để hỏi người dùng xem đã đủ 18 tuổi chưa. Nếu checkbox được đánh dấu, hãy hiển thị cho người dùng đoạn mã sau:

<div>
	<h2>Hoan hô, bạn đã đủ 18 tuổi</h2>
	<p>
		ở đây có nội dung chỉ dành cho người lớn
	</p>
</div>

Còn nếu checkbox không được đánh dấu - thì hiển thị đoạn mã sau:

<div>
	<p>
		tiếc quá, bạn vẫn chưa đủ 18 tuổi :(
	</p>
</div>

Cho một checkbox và một đoạn văn. Nếu checkbox được đánh dấu, hãy để đoạn văn hiển thị trên màn hình, còn nếu không được đánh dấu - hãy ẩn nó đi.