React-Native- Cannot Read Property '0' of Undefined - react-native

Question

I'm new to react-native. I am building a calculator app through a tutorial where I'm at the point right now where I'm trying to set it up where pressing one of the calculator buttons will log to the console that digit or symbol.
When I press one of the buttons on the calculator, I receive an error in the console 'Cannot read property '0' of undefined' if I click the 1,4,7 buttons but does 1 and 2 as well for 2,5,8 and 3,6,9 buttons respectively. I figure this means that this.buttonPressed isn't able to process my horizontal array for whatever reason, or that there is some other problem.
I've tried binding buttonPressed in the constructor with
this.buttonPressed = this.buttonPressed.bind(this)
to no avail.
export default class App extends Component {
constructor(){
super()
this.state = {}
}
buttonPressed(text) {
console.log(text)
}
render() {
let rows = []
let nums = [[1, 2, 3], [4, 5, 6], [7, 8, 9,], ['.', 0, '=']]
for(i=0; i<4; i++){
let row = []
for(let j=0; j<3; j++){
row.push(
<TouchableOpacity onPress={() => this.buttonPressed(nums[i]
[j])} style={styles.btn}>
<Text style={styles.btnText}>{nums[i][j]}</Text>
</TouchableOpacity>
)
}
rows.push(<View style={styles.row}>{row}</View>)
}
...
return (
<View style={styles.container}>
...
<View style={styles.buttons}>
<View style={styles.numbers}>
{rows}
</View>
</View>
</View>
);
}
}

Answer 1

Use ES6 format.
change:
buttonPressed(text) {
console.log(text)
}
to:
buttonPressed = (text) => {
console.log(text)
}

Answer 2

A better way to approach this problem would be to remove the logic from the render function. This would help when debugging the problem.
The rows/numbers array can be taken outside of the component as it will not change, so no need to recreate it each time the component render function is called. You can then use the map function on the array to render each row and number item. This is the preferred approach when working with react.
You can try the code below, and see if it works. Although there is some code missing from your snippet.
const ROWS = [[1, 2, 3], [4, 5, 6], [7, 8, 9,], ['.', 0, '=']]
export default class App extends Component {
buttonPressed(text) {
console.log(text)
}
render() {
return (
<View style={styles.container}>
<View style={styles.buttons}>
<View style={styles.numbers}>
{ROWS.map(numbers => (
<View style={styles.row}>
{numbers.map(number => (
<TouchableOpacity style={styles.btn} onPress={() => this.buttonPressed(number)}>
<Text style={styles.btnText}>{number}</Text>
</TouchableOpacity>
))}
</View>
))}
</View>
</View>
</View>
);
}
}
An even better approach would be to use a pure component. Then if you need state, you can use react hooks.
const ROWS = [[1, 2, 3], [4, 5, 6], [7, 8, 9,], ['.', 0, '=']]
const App = () => {
const buttonPressed = (text) => {
console.log(text)
}
return (
<View style={styles.container}>
<View style={styles.buttons}>
<View style={styles.numbers}>
{ROWS.map(numbers => (
<View style={styles.row}>
{numbers.map(number => (
<TouchableOpacity style={styles.btn} onPress={() => buttonPressed(number)}>
<Text style={styles.btnText}>{number}</Text>
</TouchableOpacity>
))}
</View>
))}
</View>
</View>
</View>
);
}
export default App