And this is why you’ll continue to struggle with these higher level abstractions. RTFM is a very common response on stackoverflow
Stack-overflow is popular because creators always hidings problem of their work.
Have you ever asked a question on stackoverflow? Because they very first thing you’ll be asked is for a sample of your code attempts. Stackoverflow is popular because it’s impossible to know everything. It’s unfortunate that lazy devs take advantage of it.
It’s nowhere sayed don’t save data into state to other functions, because actually nothing update.
Since you don’t read manuals, I’m not surprised you didn’t find this https://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly
See the hash? It says “using state correctly”
I don’t used props
Do you also demand that javascript and jquery cater to how you want to use it? Seriously. I’m beginning to think you’re not interested in actually learning, just complaining it’s not how you want.
it looks like we are creating whole coding world.
Exactly. And React doesn’t hide that fact from you. Thinking in React – React
The truth is that whether you use jquery, react, angular, vue, etc…you will have to learn their way.
So there only one new the state and you need declare as that say with constructor, just type state{}. So why they not focus to state explanations.
Honestly, if you don’t read the manual no one can help you. Here it is again https://reactjs.org/docs/state-and-lifecycle.html
if don’t create other function refresh array and pass div elements in first function as true and false, the updating of this.setState({rowcolarr, generation: this.state.generation + 1 }); do not work in play and the generations refreshings.
I don’t follow what you mean. But looking at your code you have a fundamental misunderstanding about updating state and rendering in react. I said it earlier, but I’ll highlight it for emphasis
Only update your state to the FINAL DATA.
Then let REACT handle the final DOM representation
What you did is setState to final html representation in your loops. DO NOT DO THIS. Any html elements need to be rendered by react inside the render method (or just return if stateless). So, your example should really be closer to this. Since I don’t have access to your full code, I can’t verify if it works completey. But it should hopefully give you some insight.
class App extends React.Component {
constructor(){
super()
this.state = {
rows: [],
cols: []
}
}
play = () => {
let g = this.state.rowcolarr.slice();
let g2 = this.arrayClone(g);
...
this.setState({rows, cols})
}
/**
* Since what you want inserted to the dom is a list of elements e.g a bunch of divs
* YOU MUST RETURN AN ARRAY OF ELEMENTS
*
* In react you can only return
* 1. a react element
* 2. an array of element(s)
* 3. a string (React 16)
* 4. a react fragment (React 16)
*
* You will usually return 1 element or an array though
**/
render() {
return (
// returns final, nested array.
// React will figure out how to render the actual html
this.state.rows.map((row, indexr) =>
this.state.cols.map((col, indexc) => {
const boo = row[indexc][1]; // Not sure what you want here
const onoff = 'box ' + boo;
return <div
className={onoff}
key={indexr + '_' + indexc}
id={indexr + '_' + indexc}
/>
})
)
)
}
}
// If you don't want to, or don't understand the map function
// you could do it in a loop.
// But this is not what others reading your code will expect
render() {
const finalArr = []
for (let indexr = 0; indexr < this.state.rows; indexr++) {
for (let indexc = 0; indexc < this.state.cols; indexc++) {
var boo = this.state.rows[indexr][indexc][1];
var onoff = 'box ' + boo;
finalArr.push(<div className={onoff} key={indexr + '_' + indexc} id={indexr + '_' + indexc} />);
}
}
return finalArr
}
I don’t mind helping you through this, but if you keep saying things like “I don’t read stupid manuals”, I’ll have no choice but to think you’re not serious. If you are serious, then I won’t give up until you get it 
