Չեկբոքսներ և պայմանական ռենդերինգ 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 tարեկան է։ Եթե չեկբոքսը նշված է, ցույց տվեք օգտատիրոջը կոդի հետևյալ բլոկը։

<div>
	<h2>Ուռա, ձեզ արդեն 18 կա</h2>
	<p>
		այստեղ տեղադրված է բովանդակություն միայն մեծահասակների համար
	</p>
</div>

Իսկ եթե չեկբոքսը նշված չէ՝ ապա հետևյալը։

<div>
	<p>
		ավաղ, ձեզ դեռ 18 տարեկան չեք:(
	</p>
</div>

Տրված է չեկբոքս և պարբերություն։ Եթե չեկբոքսը նշված է, թող պարբերությունը տեսանելի լինի էկրանին, իսկ եթե նշված չէ՝ թաքցրեք այն։