Get updated state of the component outside the render - reactjs

Question

Sorry, this could be very basic, but I've this sutuation...
class MyComponent extends React.Component {
constructor () {
super()
this.state = {
selected: -1
}
}
this.list = []
for (let i = 0; i < myArray.length; i++) {
let item = <div>selected on this list : {this.state.selected}</div>
this.list.push(item)
}
render () {
return (
<div>selected: {this.state.selected}</div>
<div onClick={() => this.state.selected++}>
{this.list}
</div>
}
}
This supposed to generate:
selected : -1
on this list: -1
on this list: -1
on this list: -1
on this list: -1
...
Basically all things returning the value of the selected.
But when I click on the div to increment the selected, I'm receiving something like...
selected : 2
on this list: -1
on this list: -1
on this list: -1
on this list: -1
...
and as longs it's updates...
selected : 3,4,5,6,7...
on this list: -1
on this list: -1
on this list: -1
on this list: -1
...
In other words: the values of my list created by the for/loop is always displaying the initial state while the first div inside the render shows the state properly updated.
Any help ?

Answer 1

You have made a couple of mistakes:
You use the state of component directly to update it's value. You should use setState function (read here)
You store components in variable (list). Instead of doing this, you should store only data and render it in render function, or separate component.
Try not to use for loops. React behaves more predictably when you use map and other Array prototype methods.
If you want to handle state changes outside the render see compinentWillUpdate and componentDidUpdate methods.
Working example (fiddle):
class MyComponent extends React.Component {
constructor() {
super();
this.state = {
selected: -1
}
this.handleOnClick = this.handleOnClick.bind(this);
}
render() {
const selected = this.state.selected;
const myArray = [1, 2, 3, 4];
return (
<div>
<div>selected: {selected}</div>
<div onClick={this.handleOnClick}>
{myArray.map((_, index) => <div key={index}>selected on this list: {selected}</div>)}
</div>
</div>
)
}
handleOnClick() {
const selected = this.state.selected;
this.setState({ selected: selected + 1 });
}
}

Answer 2

The main issue is that you're mutating your state instead of using setState (https://facebook.github.io/react/docs/react-component.html)
This would be an example:
class MyComponent extends React.Component {
constructor (props) {
super(props);
this.state = {
selected: -1
};
}
updateSelected = () => {
this.setState({
selected: this.state.selected + 1
});
};
render() {
let list = [];
//do whatever you need with list
return (
<div>
<div>selected: {this.state.selected}</div>
<div onClick={this.updateSelected}>
{list}
</div>
</div>)
}
}

Answer 3

Because you are storing the ui-items inside a global variable and that is not getting updates, for loop will run only once during the initial rendering so ui items stored in global variable will have the old state value, another thing is the way you are updating the state value is not correct.
Changes:
1. Never mutate this.state directly, Use setState to update the state value.
2. Storing the ui component in state variable or in global variable is not a good idea, all ui part must be inside render method.
3. Instead of using arrow function inside render to handle events, bind the method in constructor for the performance reason.
4. Assign unique key to element inside loop, check the DOC for details.
Working Code:
class MyComponent extends React.Component {
constructor () {
super()
this.state = {
selected: -1
}
this._handleClick = this._handleClick.bind(this);
}
_handleClick(){
this.setState(prevState => ({
selected: prevState.selected + 1,
}))
}
render () {
let items = [];
for (let i = 0; i < ([1,2,3,4,5]).length; i++) {
items.push(<div key={i}>selected on this list : {this.state.selected}</div>)
}
return (
<div>
<div onClick={ this._handleClick }>Increment + </div>
<div>selected: {this.state.selected}</div>
{items}
</div>
)
}
}
ReactDOM.render(<MyComponent/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>