React'ta Checkbox'lar ve Koşullu Render İşlemi

Checkbox'ın işaret durumuna bağlı olarak ekrana bir kod parçasının veya başka bir kod parçasının çıktılanmasını sağlayalım. Bunun için koşullu render işlemini kullanacağız:

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

Bir checkbox verilmiştir. Checkbox'ı kullanarak kullanıcıya 18 yaşında olup olmadığını sorun. Eğer checkbox işaretliyse, kullanıcıya aşağıdaki kod bloğunu gösterin:

<div>
	<h2>Yaşasın, 18 yaşındasınız</h2>
	<p>
		burada sadece yetişkinler için içerik bulunmaktadır
	</p>
</div>

Eğer checkbox işaretli değilse - aşağıdakini gösterin:

<div>
	<p>
		ne yazık ki, henüz 18 yaşında değilsiniz:(
	</p>
</div>

Bir checkbox ve bir paragraf verilmiştir. Eğer checkbox işaretliyse, paragrafın ekranda görünür olmasını sağlayın, eğer işaretli değilse - onu gizleyin.