ReactJS : Creating an Array of Arrays in ReactJS

Question

There is a list of objects inside the main array products. What I want is to split this main array into sub arrays of 3 objects. I have tried something like :

render() {
    console.log("All products", this.state.products);

    let allProducts = this.state.products;
    let size = 3;
    let productDeckArr =  [];
    allProducts.map( (product, index) => {
        productDeckArr.push(allProducts.slice(0, size));
    });

    console.log( "productDeckArr : ", productDeckArr);

I think the problem here is with map which gives me the same sub array over and over again. I have tried this with for loops and while but seems to be unproductive.
What is the possible solution for this in order to break down the main array into sub-arrays each containing 3 objects and last sub-array may contain less than or equal to 3 ..?

check this [question](https://stackoverflow.com/questions/8188548/splitting-a-js-array-into-n-arrays) for more information — Taghi Khavari, May 16 '20 at 22:05

Sultan H. · Answer 1 · 2020-06-20T00:26:45.360

2

Check this, in ES6 format:

const arr = [1,2,3,4,5,6,7];

const splitArrIntoChunks = (array, chunkSize = 3) => {
  let i, j, accum = [];

  for (i=0; j=array.length; i<j; i+=chunkSize) {
      accum = [...accum, array.slice(i, i+chunkSize)];
  }

  return accum;
}

splitArrIntoChunks(arr, 3) // outputs: [ [ 1, 2, 3 ], [ 4, 5, 6 ], [ 7 ] ]

edited Jun 20 '20 at 00:26

answered May 16 '20 at 21:56

Sultan H.

2,908
2
11
23

Thank you for the answer....! This really works great..., but you have to create a separate function for this and call that to get the results. I was wondering, is there anyway I could do the same process inside the render function itself. – Madhawa Jayagoda May 17 '20 at 07:52
I believe all solutions will be around using `for...while` loops, anything else would be implemented via `Array.prototype`, which will still bother u since you want to do this in the render method. eventhough it's possible just to strip the code out of the function and use it, Its not clean or preferrable, you can define this in an external file, say `src/utils/array.js` really depends on ur structure, and then import the function and simply use it where you want without exposing your component to how the function is really implemented. – Sultan H. May 17 '20 at 11:54

score 1 · Answer 2 · answered May 17 '20 at 00:55

Your problem is the map and the slice you are using.
What the map does is for each element of your list apply the given function and return a new array in the end. So let's review what is happening there:

The fist element of your list is stored in product and the index of that element in index then the given function is executed and what you do is basically push to productDeckArr allProducts.slice(0, size). Well size is always equal 3 and allProducts.slice(0,3) is always a list of the first 3 elements of allProducts so for each element you are getting the first 3 elements of allProducts and storing in productDeckArr. You will end up with something like this:

[[1,2,3], [1,2,3], ...]

I do not know any function that would do that automatically to you so i would advice creating your own. One possible implementation would be:

const splitIntoChunks = (array, chunk = 3) => {
  let result = []

  for (i=0; i<array.length; i+=chunk) {
      result.push(array.slice(i,i+chunk));
  }

  return result;
}

with this function we have:

const allProducts = [1,2,3,4,5,6,7,8]
const splitedProducts = splitIntoChunks(allProducts, 3)

console.log(splitedProducts) // result: [[1,2,3],[4,5,6],[7,8]]

Pay attention that inside the for loop the indexes given to the function slice change making possible to chunk all the list.

ReactJS : Creating an Array of Arrays in ReactJS

2 Answers2