I want to display the items in a bootstrap row with 3 columns in each row.But with this code all items are coming in a single row.I want to display
<div className="row">
when I have 3 items.
renderItems:function(){
var items = this.props.items;
return items.map(function(item){
return (
<ItemPreview key={item.id} item={item}/>
)
});
},
You can first partition your this.props.items using the solution here Partitioning in JavaScript
After that, the returned array will be partitioned
var partitionedItems = [[1,2,3],[4,5,6]...]
return paritionedItems.map( (items) => <Row items={items} /> )
and your Row component
// RowComponent.js
renderItems: function(items) {
return items.map(function(item){
return (
<ItemPreview key={item.id} item={item}/>
)
});
},
render: function() {
return (
<div className="row">
{ this.renderItems(this.props.items) }
</div>
)
}
