title: Loop through array to create React grid.
body: <p>So I've done the below setup before to create one big chunk of html as a string and then pass it to the render of a div using dangerouslySetInnerHTML.
  The issue this time is I need to use react component elements instead of a blob of html. 
  So for example where the  tags are I need to use 'react-router-dom' Link component </p>
  
  <pre><code>&lt;Link to={item.path}&gt;{item.name}&lt;/Link&gt;
  </code></pre>
  
  <p>In the past I've used this html string. </p>
  
  <pre><code>import React, { Fragment } from 'react';
  import { Link } from 'react-router-dom';
  
  const Menu = props =&gt; {
    const sortedList = props.list.sort((a,b) =&gt; (a.name &lt; b.name) ? -1 : (a.name &gt; b.name) ? 1 : 0);
  
    const mapToAlphaGrid = () =&gt; {
      const cap = '&lt;/div&gt;';
      const max = sortedList.length;
      let lastChar="";
      let row = '&lt;div class="row"&gt;';
      let col = '&lt;div class="grid-col col-4"&gt;';
      let html = row;
      let isCap = false;
  
      for(var i=0; i &lt; max; i++ ){
        let item = sortedList[i];
        let char = item.name.charAt(0);
  
        if(char &gt; lastChar){
          let alphaTitle = `&lt;div class="alpha-title"&gt;${char}&lt;/div&gt;`
          html += isCap ? cap + col + alphaTitle : col + alphaTitle;
          isCap = true;
        }
  
        html += `&lt;a class="link" href=${item.path}&gt;${item.name}&lt;/a&gt;`;
  
        lastChar = char;
        if(i &gt;= max-1){
          return html + cap + cap;
        }
      }
  
    }
  
    return(
      &lt;div dangerouslySetInnerHTML={{ __html: mapToAlphaGrid() }} /&gt;
    )
  }
  
  export default Menu;
  </code></pre>
  
  <p>I would achieve the above using component's instead of html string ? 
  Its basically a grid but each column could have multiple Link components. 
  Here is how it should look based on my array of data. As you can see some columns will have 2 and three links others may have 1. </p>
  
  <p><a href="https://i.stack.imgur.com/OYADm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OYADm.png" alt="enter image description here"></a></p>