title: How do I add a separator using map function
body: <p>I have a const     </p>
  
  <pre><code>const tags = [
    {
      tagName: "tag1",
      tagLink: "#"
    },
    {
      tagName: "tag2",
      tagLink: "#"
    },
    {
      tagName: "tag3",
      tagLink: "#"
    }
  ];
  </code></pre>
  
  <p>I want to use map function to render anchor tag and also I want a separator <code>|</code> in between the anchor tags.</p>
  
  <p>I tried using join but then it doesn't work.</p>
  
  <p>Please check the <a href="https://codesandbox.io/s/71x97w97rx" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>map using join
          &lt;div style={style}&gt;
            {tags
              .map((tag, i) =&gt; (
                &lt;a href={tag.tagLink} alt=""&gt;
                  {tag.tagName}
                &lt;/a&gt;
              ))
              .join("|")}
          &lt;/div&gt;
  </code></pre>
  
  <p>Produces: <code>[object Object]|[object Object]|[object Object]</code></p>