オブジェクトの中で条件分岐させる

Reactなどでオブジェクト形式で記述する際に条件分岐でそのオブジェクトにプロパティを追加したい場合にどのように記述するのがベストなのかわからなかったのでメモ。

結論

スプレッド構文を使う。

例ではReactで特定のパスが取得されている場合にstyleのプロパティを追加する。

export const Component = () => {
  return (
    <div
      style={{
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
        ...(path && {
          backgroundImage: `url("${IMG_URL}${path}")`,
        }),
      }}
    />
  )
}

これでpathが存在しない場合はbackground-imageは追加されなくなる。

感想

スプレッド構文は既存の配列やオブジェクトを展開したり複製するのに使うイメージだったけど、こういう使い方もあるんだな〜と。こういうの聞けるからChatGPT様様です。