props の値を評価して表示するかどうか決定する <Maybe> コンポーネント

「next-realworld-example-app」のコードを読み込んでいて参考になる箇所があったのでメモしておきます。

ごくシンプルなユーティリティ系のコンポーネント <Maybe> です。 props に表示の可否を決定するための値 test を渡し、その値の如何によって表示を制御します。

import React from "react";

const Maybe = ({ test, children }) => <>{test && children}</>;

export default Maybe;

使い方

以下のように使います。

<Maybe test={isUser}>
    <CustomLink
      href="/user/settings"
      as="/user/settings"
      className="btn btn-sm btn-outline-secondary action-btn"
    >
      <i className="ion-gear-a" /> Edit Profile Settings
    </CustomLink>
  </Maybe>

isUser が true な場合、子コンポーネントである <CustomLink /> が表示されます。

これまで、同様の実装をする場合は、素直に以下のように実装していましたが、この書き方もアリかなと。

{isUser && (
    <CustomLink
      href="/user/settings"
      as="/user/settings"
      className="btn btn-sm btn-outline-secondary action-btn"
    >
      <i className="ion-gear-a" /> Edit Profile Settings
    </CustomLink>
)}