Display row in React using bootstrap

Question

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}/>
              )
        });
    },

Answer 1

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>
    )
}