Reactにおけるチェックボックスと条件付きレンダリング

チェックボックスの状態に応じて、画面に表示されるコードを切り替えてみましょう。そのために条件付きレンダリングを使用します：

jsxfunction 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>;
}

Задание 1

チェックボックスが与えられています。このチェックボックスを使用して、ユーザーにすでに18歳以上かどうかを尋ねてください。チェックボックスがオン（チェックされている）場合、次のコードブロックをユーザーに表示します：

jsx<div>
  <h2>やった、あなたは18歳以上です</h2>
  <p>
    ここには成人のみが閲覧できるコンテンツがあります
  </p>
</div>

チェックボックスがオフ（チェックされていない）場合、次のブロックを表示します：

jsx<div>
  <p>
    残念ながら、あなたはまだ18歳未満です:(
  </p>
</div>

Задание 2

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