Skip to content
Advertisement

How Can I render Two-dimensions-Array in JSX (React Native)?

I am coding Two-dimensions-Array in ReactNative.

Single-Array is successful in JSX.
But I do not get how to use Two-dimensions-Array in JSX.
Can we use Two-dimensions-Array in JSX ?

Rendering is successful

<View>
  {myDoubleArray.map(loop => {
    return <Text>{loop}</Text>;
  })}
</View>

Rendering is nothing (my question)

<View>
  {myDoubleArray.map(loop => {
    loop.map(elm => {
      return <Text>{elm}</Text>;
    });
  })}
</View>

myDoubleArray is Two-dimensions-Array like this.

const myDoubleArray = new Array(5).fill(null);
for (let y = 0; y < 5; y++) {
  myDoubleArray[y] = new Array(3);
  for (let x = 0; x < 3; x++) {
    myDoubleArray[y][x] = y + ' : ' + x;
  }
}

Answer

You do not return a value from the outer map function. So, the product of it is an array of undefineds. You just need a return statement:

<View>
  {myDoubleArray.map(loop => {
    return loop.map(elm => {
      return <Text>{elm}</Text>;
    });
  })}
</View>
Advertisement