Generate touchable oppacity with map using nested array - react-native

Question

I write a calculator app and i need to generate touchable opacity using map
I have a nested array
state= {
buttons:['+', '-', '*', '/', 'Del']
}
And I generate touchable opacity using map
<View style={styles.container}>
<View style={styles.second_con}>
{
this.state.buttons.map((item,index)=>{
return(
<TouchableOpacity style={styles.buttons} key={index}>
<Text>{item}</Text>
</TouchableOpacity>
)
}
)
}
</View>
</View>
And it works
How can i generate it using nested array ?
buttons1:[['√', ' ', 'x!', '+/-', '%'],
['e^x', '10^x', 1, 2, 3],
['ln', 'log', 4, 5, 6],
['e', '^2', 7, 8, 9],
['π', '^3', ',', 0, '='],
]

Answer 1

If you want to preserve the rows you have laid out in your nested array, map through the rows, and use your existing map for each row. Here's an example:
<View style={styles.container}>
<View style={styles.second_con}>
{
this.state.buttons1.map(row => (
<View style={style.row_con}>
{
row.map((item, index) => (
<TouchableOpacity style={styles.buttons} key={index}>
<Text>{item}</Text>
</TouchableOpacity>
))
}
</View>
))
}
</View>
</View>

Answer 2

You need to flatten the list. You can do this with the function below
const flattenLst = (lst)=>{
let res = []
lst.forEach(curSet=>{
res = [...res,...curSet] // TODO: read into spread operators in javascript
})
return res;
}
Then do
<View style={styles.container}>
<View style={styles.second_con}>
{
// flatten this.state.buttons
flattenLst(this.state.buttons).map((item,index)=>{
return(
<TouchableOpacity style={styles.buttons} key={index}>
<Text>{item}</Text>
</TouchableOpacity>
)
}
)
}
</View>
</View>