Чекбокси и условен рендеринг во 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>

Даден е чекбокс и параграф. Ако чекбоксот е означен, нека параграфот е видлив на екранот, а ако не е означен - сокријте го.