Currently, I am working with a React component that uses Bootstrap's col col-md-4 styles to render a list of items in three columns. However, I am facing an issue where I need to add a clearfix div after every third element to ensure proper display of the next 'row' of elements.
This is how my current rendering code looks:
render() {
var resultsRender = $.map(this.state.searchResults, function (item) {
return <Item Name={ item.Name } Attributes={ item.Attributes } />;
}
return (
<div>{ resultsRender }</div>
);
}
The Item component simply renders a div with the necessary classes:
render() {
return(
<div className='col col-md-4'>
...content here...
</div>
);
}
My current solution involves passing the index of each Item as a prop and applying the clearfix class if the index is a multiple of 3. However, I feel like this approach is a bit hacky and I would prefer a cleaner method using a separate div to conditionally show the clearfix based on viewport size using Bootstrap's visible-* classes.
If anyone has suggestions for a more elegant solution to this problem, I would greatly appreciate it.