Map react items with separator

I just wanted to share a little snippet that took me a few minutes to write but that is really useful. Let’s say you want to display a list of items separated by a string, or a line break. There are lots of options here: https://stackoverflow.com/questions/34034038/how-to-render-react-components-by-using-map-and-join but they are not very elegant.

How about if you could write something like:

and get a list of links, separated by line breaks?

Well you can. Here is the code:

There are simpler ways of writing this but I wanted to understand how iterators work.

1 thought on “Map react items with separator”

  1. I followed one of the answers and modified it to work with my task:

    {data
    .map(item => )
    .reduce((prev, curr) => (

    {prev}
    {}
    {curr}

    ))}

    I feel this is much simple.

Leave a Reply

Your email address will not be published. Required fields are marked *