Inserting an element after every 'X' React components
<p>I have a React component that renders a list of items into three columns using Bootstrap's <code>col col-md-4</code> styles. However, I need to <a href="http://getbootstrap.com/css/#grid-responsive-resets" rel="nofollow" title="insert a clearfix div">insert a clearfix div</a> after every third element to ensure that the next 'row' of elements displays in the correct place.</p>

<p>My current render code looks like this:</p>

<pre><code>render() {
  var resultsRender = $.map(this.state.searchResults, function (item) {
    return &lt;Item Name={ item.Name } Attributes={ item.Attributes } /&gt;;
  }

  return (
    &lt;div&gt;{ resultsRender }&lt;/div&gt;
  );
}
</code></pre>

<p><code>Item</code> simply renders a div with the <code>col</code> classes, containing the passed-in content:</p>

<pre><code>render() {
  return(
    &lt;div className='col col-md-4'&gt;
      ...content here...
    &lt;/div&gt;
  );
}
</code></pre>

<p>My current workaround is to pass the index of the <code>Item</code> in as a prop, and then apply the clearfix class to the <code>Item</code> if the index is a multiple of 3, but this feels a bit hackish to me and I would prefer a separate <code>div</code> to allow me to only show the clearfix on the required viewport size (using Bootstrap's <code>visible-*</code> classes).</p>

<p>I'm sure there must be a more elegant way to solve this problem than the one I've come up with. Any suggestions are appreciated.</p>