title: Inserting an element after every 'X' React components
body: <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>