title: add bullets (&bull;) between html links except last item dynamically generated links in React
body: <p>I am rendering data dynamically in React after making an api call, then mapping through the results to show links to websites in a table. All is working as intended except that I need to add bullets between each link to segment the content for the user (any number of links per row - it can be one up to ten). I need to make sure there is NOT a trailing bullet if there is only one link rendered per row as well as not add a bullet behind the last link in a row if there is more than one. Below is working code, you can see the html &bull; after the <code>{data.title}</code></p>
  
  <pre><code>&lt;table className="graph-table"&gt;
      &lt;thead&gt;
          &lt;tr id="table-header" className="table-row"&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          { displayData.map( ( item, i ) =&gt; {
              return (
                  &lt;tr className="table-row"&gt;
                      &lt;td&gt; { item.categoriesArray.map(( {data}) =&gt; { return  &lt;a href={data.uri}&gt; {data.title} &amp;bull;&lt;/a&gt; })}
                      &lt;/td&gt;
                  &lt;/tr&gt;
              )
            })
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The output is:</p>
  
  <p>row 1       link 1 &bull; link 2 &bull;
  <br>row 2       link 1 &bull;
  <br>row 3       link 1 &bull; link 2 &bull; link 3</p>
  
  <p>It works if there is the right number of links (as seen in row 3), I just don't have control of the data I get back, I need to smartly add bullets.</p>
  
  <p>Thanks in advance.</p>