0

I want to create a two dimensional containing arrays of length <=3. This should be dynamically filled with the following function:

  let preppedArray = []
  let currIndex = -1
  let innerIndex = 0
  for (let i = 0; i < props.children.length; i++) {
    if (i%3 === 0) {
      currIndex++
      innerIndex = 0
      preppedArray.push ([currIndex,"dummy"])
      let currElement = props.children[i]
      preppedArray[currIndex][innerIndex] = currElement
    } else{
      innerIndex++
      preppedArray[currIndex][innerIndex] = props.children[i]
    }
  }

Oddly, the following is the output:

Array(3) [ (3) […], (3) […], (2) […] ]
​
0: Array(3) [ {…}, {…}, {…} ]
​​
0: Object { "$$typeof": Symbol("react.element"), type: Card(props)
, key: null, … }
​​
1: Object { "$$typeof": Symbol("react.element"), type: Card(props)
, key: null, … }
​​
2: Object { "$$typeof": Symbol("react.element"), type: Card(props)
, key: null, … }
​​
length: 3
​​
<prototype>: Array []
​
1: Array(3) [ {…}, {…}, {…} ]
​​
0: Object { "$$typeof": Symbol("react.element"), type: Card(props)
, key: null, … }
​​
1: Object { "$$typeof": Symbol("react.element"), type: Card(props)
, key: null, … }
​​
2: Object { "$$typeof": Symbol("react.element"), type: Card(props)
, key: null, … }
​​
length: 3
​​
<prototype>: Array []
​
2: Array [ {…}, "dummy" ]
​​
0: Object { "$$typeof": Symbol("react.element"), type: Card(props)
, key: null, … }
​​
1: "dummy"
​​
length: 2
​​
<prototype>: Array []
​
length: 3
​
<prototype>: Array []

It looks as though the algorithm creates one "ghost" dummy element at the end. However, I do not comprehend why or how to fix it. Many thanks in advance!

VictoriaStudios
  • 135
  • 1
  • 9
  • 1
    It's not quite clear what you expect `[currIndex,"dummy"]` to do if not to create a dummy element? – Bergi Apr 08 '22 at 01:56
  • The "dummy" is created so that the according element can be overwritten from "props.children". However, the loop ends incompletely, by creating one dummy element too many. That is exactly the problem. – VictoriaStudios Apr 08 '22 at 02:00
  • It is react because the array being used comes from props.children. It is also impossible to push elements from the array directly into the outer array... for reasons unknown. That's why I had to use the "dummy approach" (See above) – VictoriaStudios Apr 08 '22 at 02:02
  • You don't have to create a dummy *element*. Yes, you need to create all the inner arrays separately - but do that with an empty array: `preppedArray.push([])`! – Bergi Apr 08 '22 at 02:10
  • Ah that's an idea! I just also found a different, easier solution. – VictoriaStudios Apr 08 '22 at 02:11
  • Well, yes, there's [many simple solutions](https://stackoverflow.com/q/8495687/1048572) to your problem, but it appeared that your question came from confusion over how your current code works. If it's still not clear, try `preppedArray.push(['a', 'b', 'c', 'd'])` and observe the output. – Bergi Apr 08 '22 at 02:16

1 Answers1

0

So I found a much easier solution using slice:

  let preppedArray = []
  let currIndex = -1
  for (let i = 0; i < props.children.length; i++) {
    if (i%3 === 0) {
      currIndex++
      preppedArray.push (props.children.slice(i,i+3))
    } 
  }

This creates a two-dimesional array with the desired amount of sub-elements.

VictoriaStudios
  • 135
  • 1
  • 9