How to Display Json Data in Bootstrap Columns

Question

I have a React App that displays Json Data on a page

Here is JSON file

[
   {
      "name":"Apple",
      "price":"3,99",
      "description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.",
      "image":"apple.jpg",
      "profileUrl":"www.google.com"
   },
     {
      "name":"Banana",
      "price":"1,99",
      "description":"Sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
      "image":"banana.jpg",
      "profileUrl":"#"
   },
   {
      "name":"Watermelon",
      "price":"1,50",
      "description":"At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
      "image":"watermelon.png",
      "profileUrl":"#"
   },
   {
      "name":"Strawberry",
      "price":"7,99",
      "description":"Stet clita kasd gubergren.",
      "image":"strawberry.jpg",
      "profileUrl":"#"
   },
   {
      "name":"Mango",
      "price":"4,99",
      "description":"Labore et dolore magna aliquyam erat, sed diam voluptua.",
      "image":"mango.jpg",
      "profileUrl":"#"
   },
   {
      "name":"Lemon",
      "price":"2,00",
      "description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.",
      "image":"lemon.png",
      "profileUrl":"#"
   },
   {
      "name":"Coconut",
      "price":"5,50",
      "description":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.",
      "image":"coconut.jpg",
      "profileUrl":"#"
   }
]

as you see below I display them in one column, what I want to do is to add column seperater after each three items. Because I want to have just 3 products on a row. I use this layout from bootstrap

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Is there a logic in React that it return this line after every 3 products?

import React, { Component } from 'react'
import ProductInfo from '../plist.json'


class Products extends Component {


  render() {
    return (
      <div>
        {ProductInfo.map((postDetail, index) => {
          return (
            <div>
              <div class="container">
                <div class="row">
                  <div class="col">
                    <h1>{postDetail.name}</h1>
                    <img src={require(`./${postDetail.image}`)}/>
                    <p>{postDetail.price}</p>
                    <p>{postDetail.description}</p>


                  </div>
                </div>
              </div>
            </div>
          )
        })}
      </div>
    )
  }
}

export default Products

you should use bootstrap grid classes for layouts, but also if you want to use your code as it is, just try adding conditional rendering of horizontal line something along the lines of " if (index % 3 == 0) { horizonatlline }" — Sid
– Sid, Commented Jan 8, 2019 at 23:18

Cat_Enthusiast · Accepted Answer · 2019-01-08 22:47:07Z

2

You can make use of Bootstrap's column system to display 3 columns per row. Each row is comprised of 12 columns. So to display 3 sections, you would divide 12 by 3 and get a column size of 4.

import React, { Component } from 'react'
import ProductInfo from '../plist.json'


class Products extends Component {


  render() {
    return (
      <div className="container>
         <div className="row">
            {ProductInfo.map((postDetail, index) => {
              return (
                 <div className="col-md-4">
                    <h1>{postDetail.name}</h1>
                    <img src={require(`./${postDetail.image}`)}/>
                    <p>{postDetail.price}</p>
                    <p>{postDetail.description}</p>
                 </div>
               )
           })}
         </div>
      </div>
    )
  }
}

export default Products

answered Jan 8, 2019 at 22:47

Cat_Enthusiast

15.7k5 gold badges26 silver badges47 bronze badges

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

1 Comment

aryanknp Over a year ago

cool guy but this will show all the data in one row , do we need to create new row or check like this (i%3 == 0)

Collectives™ on Stack Overflow

How to Display Json Data in Bootstrap Columns

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related