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>

චෙක්පත් පෙට්ටියක් සහ ඡේදයක් ලබා දී ඇත. චෙක්පත් පෙට්ටිය සලකුණු කළේ නම්, ඡේදය තිරය මත දෘශ්‍යමාන වන පරිදි තබන්න, සලකුණු කර නොමැති නම් - එය සඟවන්න.