join-react-components-with-comma.md

Join React Components With Comma

Want to connect a list of React components with a delimiter, like a comma? Imagine a sentence of:

Link A, Link B, Link C.

How could we programmatically achieve this in React?

Here's one answer, inserting a comma before all but the first list item:

{items.map((item, index) => (
  <React.Fragment key={item.id}>
    {index > 0 && ', '}
    <a href={`/items/${item.id}`}>{item.name}</a>
  </React.Fragment>
))}

Lots of other good suggestions in this Gist.