Žymimieji langeliai ir sąlyginis renderinimas React

Padarykime taip, kad, priklausomai nuo žymimojo langelio būsenos, ekrane būtų rodoma viena kodo dalis arba kita. Tam naudokime sąlyginį renderinimą:

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

Duotas žymimasis langelis. Naudodamiesi žymimuoju langu, paklauskite naudotojo, ar jam jau yra 18 metų. Jei žymimasis langelis pažymėtas, parodykite naudotojui šį kodo bloką:

<div>
	<h2>Valio, jums jau yra 18</h2>
	<p>
		čia yra turinys skirtas tik suaugusiems
	</p>
</div>

O jei žymimasis langelis nepažymėtas - tai šį:

<div>
	<p>
		deja, jums dar nėra 18 metų:(
	</p>
</div>

Duotas žymimasis langelis ir pastraipa. Jei žymimasis langelis pažymėtas, tebūnie pastraipa matoma ekrane, o jei nepažymėtas - paslėpkite ją.