React入門 練習問題 52：条件付きレンダリング
次のコードを実行した場合、画面に表示される内容として正しいものはどれですか？
```jsx
import React, { useState } from 'react';
function LoginStatus() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const toggleLogin = () => {
setIsLoggedIn(!isLoggedIn);
};
return (
<div>
<h2>ユーザーステータス</h2>
{isLoggedIn ? (
<p>ようこそ、ユーザーさん！</p>
) : (
<p>ログインしてください</p>
)}
<button onClick={toggleLogin}>
{isLoggedIn ? 'ログアウト' : 'ログイン'}
</button>
</div>
);
}
```
- 最初は「ようこそ、ユーザーさん！」と表示され、ボタンを押すと「ログインしてください」に切り替わる
- 最初は「ログインしてください」と表示され、ボタンを押すと「ようこそ、ユーザーさん！」に切り替わる
- 常に「ようこそ、ユーザーさん！」と「ログインしてください」の両方が表示される
- 何も表示されない
- 最初は「ログインしてください」と表示されるが、ボタンを押しても表示は変化しない
Qraftユーザーの成績：正答率 92%（12/13回正解）
正解と解説を見る
三項演算子（? :）を使った条件付きレンダリングでは、状態変数の値に応じて表示するJSXを切り替えます。この設問ではisLoggedInの初期値がfalseのため、最初は「ログインしてください」と表示され、ボタンを押すと「ようこそ、ユーザーさん！」に切り替わるのが正しい動作です。
【正解の理由】
useState(false)によりisLoggedInの初期値はfalseです。三項演算子はisLoggedInがfalseのとき「ログインしてください」を表示し、toggleLoginでtrueに反転すると「ようこそ、ユーザーさん！」に切り替わります。
【不正解の理由】
• 「最初は『ようこそ』と表示され…」：初期値はfalseなので、最初に表示されるのは「ログインしてください」です。
• 「常に両方が表示される」：三項演算子は条件によりどちらか一方のみを描画するため、同時に両方は表示されません。
• 「何も表示されない」：isLoggedInの値に応じて必ずどちらかのメッセージとボタンが表示されます。
• 「ボタンを押しても表示は変化しない」：toggleLoginがisLoggedInを反転させ再レンダリングを起こすため、ボタンを押すと表示は正しく切り替わります。