【React】スプレッド構文でPropsを渡す際に、条件切り替えを行う方法

まずこのような簡単な文字を表示する JSX を考える。

page.tsx

export default function Test() {
  const props = {
    style: {
      padding: '20px',
      color: 'red',
    },
  }

  return (
    <div {...props}>
      ラベル
    </div>
  )
}

このとき、何らかの変数によってスプレッド構文を渡したり渡さなかったりしたい。
そういう時は、スプレッド構文の中で切り替えるとよい。

page.tsx

  export default function Test() {
+   const isError = true

    const props = {
      style: {
        padding: '20px',
        color: 'red',
      },
    }

    return (
-     <div {...props}>
+     <div {...(isError && props)}>
        ラベル
      </div>
    )
  }

これに気付くのに少し時間がかかってしまった。
TSは 関数型 やこの && || を使いこなせるようになると楽しいね。

JSX の HTML が思ったより TypeScript に寄せられてて感動している。