Bootstrap Rows in ReactJS

Question

I am working with a reactJS app and have the following code:

renderProductBlock(product, index) {
    return (
        <div className="product col-xs-4">
            <span className="product-name">{product.name}</span>
            <span className="product-price">{product.price}</span>
            <a href="#" className="btn btn-primary">Buy Now</a>
        </div>
    );
}

renderProductList() {
    let blocks = [];

    _.forEach(product, (item, index) => {
        const productBlock = this.renderProductBlock(item, index);

        if(productBlock) {
            blocks.push(productBlock);
        }
    });

    return blocks;
}

render() {
    const productsBlock = this.renderProductList();

    if(productsBlock) {
        return (
            <div className="products">
                <div className="row">
                  {productsBlock}
                </div>
            </div>
        )
    }   
}

Which is outputting HTML in this layout:

<div class="products">
    <div class="row">
      <div class="product col-xs-4">
          Content
      </div>
      <div class="product col-xs-4">
          Content
      </div>
      <div class="product col-xs-4">
          Content
      </div>
      <div class="product col-xs-4">
          Content
      </div>
      <div class="product col-xs-4">
          Content
      </div>
   </div>
</div>

What would be the best way for me to add bootstrap rows into these loops to wrap every 3 products in a row div like so:

<div class="products">
    <div class="row">
        <div class="product col-xs-4">
            Content
        </div>
        <div class="product col-xs-4">
            Content
        </div>
        <div class="product col-xs-4">
            Content
        </div>
    </div>
    <div class="row">
        <div class="product col-xs-4">
            Content
        </div>
        <div class="product col-xs-4">
            Content
        </div>
    </div>
</div>

Sorry for the slightly simple question but I can't seem to get this right.

Have you tried returning blocks return blocks; within a <row>? — Bala
– Bala, Commented Mar 29, 2016 at 12:24
I have updated the question with a single row block which is actually how it currently is but it's not working well responsively (we are also actually using col-sm-X, col-md-X etc) and wrapping in just a single row is meaning some blocks are floating to the right where we have rows that aren't fully adding up to 12 columns (ie only 2 products in a row). For this reason we ideally want a row every 3 columns :) — Tom Pinchen
– Tom Pinchen, Commented Mar 29, 2016 at 12:29

Aleph Aleph · Accepted Answer · 2016-03-29 12:28:37Z

5

Would just keep track of the how many blocks have been processed within the loop and once three blocks are rendered, group them in a row:

renderRow() {
    return (
        <div class="row">
            {block}
        </div>
    );
}

renderProductList() {
    let blocks = [], rows = [];
    _.forEach(product, (item, index) => {
        const productBlock = this.renderProductBlock(item, index);
        if (productBlock) {
            blocks.push(productBlock);
        }
        if (block.length >= 3) {
            const row = this.renderRow(blocks);
            if (row) {
                rows.push(row);
            }
            blocks = [];
        }
    });    
    const row = this.renderRow(blocks);
    if (row) {
         rows.push(row); 
    }
    return rows;
}

answered Mar 29, 2016 at 12:28

Aleph Aleph

5,4052 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Pinchen Over a year ago

Nice, I was trying to use Modulus index % 4 etc. but it wasn't coming together. This is much better though, thanks!

TrieuNomad Over a year ago

wish there was an easier way to do this in react, but anyways, this helped save me some time on calculating bootstrap rows and columns, thanks!

Collectives™ on Stack Overflow

Bootstrap Rows in ReactJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related