Как отобразить данные Json в столбцах начальной загрузки

Question

У меня есть приложение React, которое отображает данные Json на странице

Вот файл JSON

[
   {
      "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":"#"
   }
]

как вы видите ниже, я отображаю их в одном столбце, и я хочу добавить разделитель столбцов после каждых трех элементов. Потому что я хочу иметь всего 3 продукта подряд. Я использую этот макет из начальной загрузки

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

Есть ли в React логика, что он возвращает эту строку после каждых 3 продуктов?

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

Answer 1

Вы можете использовать систему столбцов Bootstrap для отображения 3 столбцов в строке. Каждая строка состоит из 12 столбцов. Таким образом, чтобы отобразить 3 раздела, вы должны разделить 12 на 3 и получить размер столбца 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