【React】if, &&, 条件演算子(三項演算子)を使った条件付きレンダーを実例でわかりやすく解説

// ログイン状態を受け取るコンポーネント
function UserGreeting(props) {
  const isLoggedIn = props.isLoggedIn; // ログイン状態（true/false）
  
  // 1. 条件が true の場合
  if (isLoggedIn) {
    // ログイン済みの場合の表示を返却
    return <h1>おかえりなさい！</h1>;
  }
  
  // 2. 条件が false の場合の表示を返却 (else の役割)
  return <h1>ログインしてください。</h1>;
}

// 例: <UserGreeting isLoggedIn={true} /> の場合、"おかえりなさい！" が表示されます。

// 例: データがない場合は何も表示しない（早期リターンで null を返す）
function Post({ data }) {
  if (!data) { // data が null や undefined の場合
    return null; // ★何もレンダーしない
  }

  // データがある場合のみ、以下の処理を実行
  return (
    <div className="post">
      <h2>{data.title}</h2>
      <p>{data.content}</p>
      {/* ... その他の要素 ... */}
    </div>
  );
}

条件 && コード

function ItemList(props) {
  const isPacked = props.isPacked;
  const itemName = props.name;

  return (
    <li className="item">
      {itemName}
      {isPacked && ' ✅'} //isPacked=trueの場合のみ✅を表示
    </li>
  );
}

// 例: <ItemList name="牛乳" isPacked={true} /> → 牛乳 ✅
// 例: <ItemList name="卵" isPacked={false} /> → 卵

//変数importanceが0以上の場合に、nameをイタリックで出力する
function Item({ name, importance }) {
    return (
      <li className="item">
        {importance >0 && <i>}{name}{importance >0 && </i>}
      </li>
    );  
}

function Item({ name, importance }) {
  return (
    <li className="item">
      {importance > 0 
        ? <i>{name}</i> // importance > 0 の場合
        : name          // importance が 0 またはそれ以下の場合
      }
    </li>
  );
}

const isLogin = true;
const message1 = isLogin && 'ようこそ！'; 
console.log(message1); // 出力: "ようこそ！" 

const isCartEmpty = false;
const message2 = isCartEmpty && 'カートは空です。';
console.log(message2); // 出力: false

条件式 ? trueの場合の式 : falseの場合の式

function LoginButton(props) {
  const isLoggedIn = props.isLoggedIn; // ログイン状態

  //isLoggedIn が true なら "ログアウト" ボタン、false なら "ログイン" ボタンを表示
  return (
    <div>
      {isLoggedIn ? <button>ログアウト</button> : <button>ログイン</button>}
    </div>
  );
}

  return (
    <div>
      {isLoggedIn ? <button>ログアウト</button> : <button>ログイン</button>}
    </div>
  );

return (
  <div>
    {isLoggedIn ? (
      <button>ログアウト</button> // trueのブロック
    ) : (
      <button>ログイン</button>  // falseのブロック
    )}
  </div>
);

return (
  <div>
    {isLoggedIn ? (
      <> 
        <p>ようこそ！</p> {/* 1つ目の要素 */}
        <button>ログアウト</button> {/* 2つ目の要素 */}
      </>
    ) : (
      <button>ログイン</button>
    )}
  </div>
);

function Item({ name, importance }) {
    return (
      <li className="item">
        {importance > 0 ? <i>{name}</i> : {name}}
      </li>
    );  
}


export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <Item 
        importance={9} 
        name="Space suit" 
      />
    </section>
  );
}

//出力
Error
Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.

{importance > 0 ? <i>{name}</i> : {name}}

{importance > 0 ? <i>{name}</i> : name }

{importance > 0 ?(
   <i>{name}</i>
  ):(
   name
)}