react js variable can not shown in alert - reactjs

Question

I'm learning react.js and dealing with the below code:
import React, { Component } from 'react';
class Counter extends Component {
state = {
counts:1,
tags:['tag1', 'tag2', 'tag3']
};
incrementIt() {
this.state.counts++;
console.log("counts value is ", this.state.counts);
}
btnClick(){
this.incrementIt = this.incrementIt.bind(this);
return (
<div>
<button onClick={this.incrementIt} className="btn btn-primary btn-sm">Click me</button>
</div>
)
}
render(){
return(
<div>
{this.btnClick()}
</div>
)
}
}
export default Counter;
I'm expecting counts shows in the alert window but not working, while it works when switch back to console.log(). How comes?

Answer 1

You want to clean up some of that code: use setState, don't directly manipulate state. Also, assign that state in your constructor; don't use bind; and remember that if you want to see state changes, you need to wait until the state actually updates (which you can do with a function as second argument to setState)
import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
counts: 1
};
}
increment(evt) {
let curCount = this.state.count;
this.setState({ counts: curCount + 1}, () => {
console.log(`after incrementing, counts value is ${this.state.counts}.`);
});
}
render(){
return (
<div>
<button onClick={evt => this.increment(evt)} className="btn btn-primary btn-sm">Click me</button>
</div>
)
}
}
export default Counter;