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