0

I'm pulling products from api. I will list the products by loop. but I am using "card-group" in my design. There is a "card-group" for every 4 products. that is, if I return the direct products with a loop, "card-group" falls on each 1 product. This is causing a defect in my design. how do i overcome this?

My design will be like below. A "card-group" needs to be created for every 4 products:

<div className="card-group mt-5">
    <div className="card">
     ......
    </div>
    <div className="card ">
     ......                   
    </div>
     <div className="card ">
     ......                   
    </div>
     <div className="card ">
     ......                   
    </div>            
</div>

I am pulling the data as in the photo:

enter image description here

By design it should look like this:

enter image description here

import * as React from 'react';
import {connect} from 'react-redux'

const Urunler = (props) => {
   console.log(props);
    return (
            <div className="row">
                <div className="col-md-12">
                    <div className="card-group mt-5">
                      <div className="card">
                         ......
                      </div>
                      <div className="card ">
                         ......                   
                      </div>
                      <div className="card ">
                         ......                   
                       </div>
                      <div className="card ">
                         ......                   
                       </div>            
                      </div>
                       <div className="card-group mt-5">
                           <div className="card">
                             ......
                          </div>
                         <div className="card ">
                             ......                   
                          </div>
                        <div className="card ">
                          ......                   
                         </div>
                       <div className="card ">
                          ......                   
                      </div>            
                  </div>
                </div>
            </div>
        )
}

const mapStateToProps = (state) =>{
    
    return {
        products:state.urunler
    }
}
export default connect(mapStateToProps)(Urunler)
maria
  • 57
  • 5
  • Some minimal code example of the code would help. – Gabriel Lupu Nov 05 '21 at 07:51
  • Are you asking how to chunk up an array? Are you asking how to render elements into a grid layout? SO isn't a code writing service, what have you tried? https://stackoverflow.com/help/minimal-reproducible-example – Drew Reese Nov 05 '21 at 07:54
  • @DrewReese I returned data with map. but there was one product in each "card-group". I want to have 4 items in each "card-group" – maria Nov 05 '21 at 07:58

1 Answers1

-1

Split your products into chunks of four:

 function splitIntoChunks(size, array) {
    let chunks = []
    let i = 0

    while (i < array.length) {
      chunks.push(array.slice(i, i += size));
    }

    return chunks;

  }

const productsChunks = splitIntoChunks(4, products)
const renderProducts = productsChunks.map((chunk, index) => (
 <div className="card-group mt-5" key={index}>
  {chunk.map((product) => (
     <div className="card" key={product.id}></div>
   ))}          
 </div>
))
Kamal Alhomsi
  • 621
  • 1
  • 7
  • 14
  • What is `this` in the `splitIntoChunks` utility? You pass the `products` array to the `size` argument. This isn't working code. `.splice` should also generally be avoided since it mutates the array being operated over. – Drew Reese Nov 05 '21 at 08:03
  • Fixed, Thanks for pointing out this. – Kamal Alhomsi Nov 05 '21 at 08:06
  • 1
    Your current solution removes elements from `array`. If the component ever re-renders `array` is empty, thus showing an empty list. – 3limin4t0r Nov 05 '21 at 08:59