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>

チェックボックスと段落が与えられています。チェックボックスがオンの場合、段落が画面に表示されるようにし、オフの場合は非表示にしてください。