React Native: Dynamic state allocation inside a .map loop giving error - reactjs

Question

My goal of this code:
Render some view elements with a loop
Inside the loop, set the state
On clicking the elements, update that value
Here is my code:
import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
maths: {},
};
}
prepareMaths = function() {
var count = 5;
var updateMath = key => {
var stateMaths = this.state.maths;
stateMaths['position_' + key] = Math.random();
this.setState({maths: stateMaths}, () => {
console.log(this.state.maths);
});
};
var stateMaths = this.state.maths;
return [...Array(count)].map((options, key) => {
stateMaths['position_' + key] = Math.random();
this.setState({maths: stateMaths});
return (
<TouchableOpacity
key={key}
onPress={() => updateMath(key)}
style={{
height: 100,
width: 200,
marginRight: 20,
marginBottom: 10,
backgroundColor: 'green',
}}>
<Text>{this.state.maths['position_' + key]}</Text>
</TouchableOpacity>
);
});
};
render() {
return (
<View>
<View>{this.prepareMaths()}</View>
</View>
);
}
}
I'm getting this error with this code:
I'm very confused. Because if I remove setState... code inside the loop, it's showing random maths naturally. But how? Since I'm using this.state.maths['position_' + key] on render. I really don't know how that data is generating.
Please help.
Thanks in advance.

Answer 1

Issues
State mutations
var stateMaths = this.state.maths; // <-- state
stateMaths['position_' + key] = Math.random(); // <-- mutation!!
Updating state in render function causes rerender. render is a pure function with zero side-effects
return [...Array(count)].map((options, key) => {
stateMaths['position_' + key] = Math.random();
this.setState({maths: stateMaths}); // <-- trigger rerender
Solution
Factor prepareMaths and updateMath into standalone utility functions
Convert maths state to array
Use componentDidMount to initialize state
Use componentDidUpdate to log updated state
Move the JSX from prepareMaths to render function for mapping from state
Updated component
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
maths: [],
};
}
componentDidMount() {
this.prepareMaths();
}
componentDidUpdate() {
console.log(this.state.maths);
}
updateMath = (key) => {
this.setState((prevState) => ({
maths: prevState.maths.map((el, i) => (i === key ? Math.random() : el)),
}));
};
prepareMaths = function () {
const count = 5;
this.setState({ maths: [...Array(count)].map(Math.random) });
};
render() {
const { maths } = this.state;
return (
<View>
<View>
{maths.map((value, key) => (
<TouchableOpacity
key={key}
onPress={() => this.updateMath(key)}
style={{
height: 100,
width: 200,
marginRight: 20,
marginBottom: 10,
backgroundColor: 'green',
}}>
<Text>{value}</Text>
</TouchableOpacity>
))}
</View>
</View>
);
}
}
Expo Snack Demo