JSXタグの配列を区切り文字で分割する

React
JSX
<div className="tags">
  {['aaa', 'bbb', 'ccc'].map((tag, index)=>(
    <div
      className="tag"
      key={index}
      css={css`
        display: inline-block;
      `}
    >
      {tag}
    </div>
  ))}
</div>

とあったときに文字列であれば['aaa', 'bbb', 'ccc'].join('/')とすれば繋ぐことができるのですが、これをJSXタグでやると

[object Object]/[object Object]/[object Object]

となってしまいうまくいきません。JSXタグでも同じように繋げるにはreduceを使って↓のようにしてJSXタグの配列を返すようにすると、区切り文字で分割できます。

<div className="tags">
  {['aaa', 'bbb', 'ccc'].map((tag, index)=>(
    <div
      className="tag"
      key={index}
      css={css`
        display: inline-block;
      `}
    >
      {tag}
    </div>
  )).reduce((prev, curr) => {
    return [
      prev,
      <div className="tag-separate" css={css`display: inline-block; margin: 0 8px;`}>/</div>,
      curr
    ]
  })}
</div>

参照