React: Render new row every 4th column

Question

I\'m using react and I want to render a new row every 4th column.

My code:

function Product(props) {
  const content = prop         


        

Answer 1

The nice thing about Bootstrap is that you can keep all the col* in a single row, and then insert a full-width div every 4 columns to force the wrap. These keeps it simpler and you don't have to chunk the data.

Here's what the React render looks like:

render() {
    let columns=[];
    this.props.items.forEach((item,idx) => {

        // push column
        columns.push(
            

                Content
            
        )

        // force wrap to next row every 4 columns
        if ((idx+1)%4===0) {columns.push(
)}
    })


    return (
        

        {columns}
        
    )            
}

Demo: https://www.codeply.com/go/VMV26jhHFz

Note: In Bootstrap 4, use

as shown above. In Bootstrap 3, use

to force the columns to wrap every n.