ReactBootstrap - Display data in chunks

https://stackoverflow.com/questions/62533219/how-do-i-display-3-card-components-horizontally-with-react-bootstrap-and-grids

by ijmorales

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="col-xs-12 col-md-6" id='app'>

</div>

CSS

#main{
  margin-top: 20px;
}
.content{min-height: 340px;}

Babel + JSX

//{Button, ButtonGroup, DropdownButton} = ReactBootstrap
var {Button, ButtonGroup, DropdownButton, MenuItem, Card, Row, Col, Container } = ReactBootstrap

const chunk = (arr, chunkSize = 1, cache = []) => {
  const tmp = [...arr]
  if (chunkSize <= 0) return cache
  while (tmp.length) cache.push(tmp.splice(0, chunkSize))
  return cache
}

const data = {
  "products": [
    {
      "id": 1,
      "name": "Moto G5",
      "quantity": 2,
      "price": 13000
    },
    {
      "id": 2,
      "name": "Racold Geyser",
      "quantity": 3,
      "price": 6000
    },
    {
      "id": 3,
      "name": "Dell Inspiron",
      "quantity": 4,
      "price": 50000
    },
    {
      "id": 4,
      "name": "Epson Printer",
      "quantity": 1,
      "price": 9500
    },
    {
      "name": "Lenovo G50",
      "quantity": 2,
      "price": 50000,
      "id": 5
    },
    {
      "id": 1,
      "name": "Moto G5",
      "quantity": 2,
      "price": 13000
    },
    {
      "id": 2,
      "name": "Racold Geyser",
      "quantity": 3,
      "price": 6000
    },
    {
      "id": 3,
      "name": "Dell Inspiron",
      "quantity": 4,
      "price": 50000
    },
  ]
}

const Product = (props) => {
	const card = (<Card>
        <Card.Body>
          <Card.Title>{props.name}</Card.Title>
          <Card.Text>
            Quantity : {props.quantity}
          </Card.Text>
          <Card.Title>{props.price}</Card.Title>
            <Button variant="primary">View Product</Button>
        </Card.Body>
      </Card>)
  return card;
}

const ProductList = (props) => {
	const productsChunks = chunk(props.products, 3)
  const rows = productsChunks.map((productChunk, index) => {
  	const productsCols = productChunk.map((product, index) => {
    	return (
      	<Col xs="4" key={product.id}>
          <Product key={product.id} quantity={product.quantity} price={product.price} name={product.name} />	  
      	</Col>
      );
    });
    return <Row key={index}>{productsCols}</Row>
 ...