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

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;
  }
}

CodePudding user response：

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>

CodePudding user response：

There are two problems in your code you don't return anything and you forgot to assign a key I used the indexes it's not great but I don't know the contents of your array.

<View>
  {myDoubleArray.map((loop, indexA) => 
    loop.map((elm, indexB) => (
      <Text key={`${indexA}_${indexB}`}>{elm}</Text>
    ))
  )}
</View>