ჩეკბოქსები და პირობითი რენდერინგი 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>

მოცემულია ჩეკბოქსი და აბზაცი. თუ ჩეკბოქსი მონიშნულია, აბზაცი იყოს ხილული ეკრანზე, ხოლო თუ არ არის მონიშნული - დამალეთ იგი.