react state change doesn't work as expected - reactjs

Question

Hi this is a code that I tried out to submit data from a form.
import * as React from 'react'
export class User extends React.Component{
constructor(props) {
super(props);
this.state = {
name: '',
message: '',
messages: ''
}
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
render() {
return (
<div class="panel panel-default" id="frame1" onSubmit={this.handleSubmit}>
<form class="form-horizontal" action="/action_page.php">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Your Name </label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" placeholder="Enter your Name" onChange={this.handleChange} />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="message">Message</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="message" placeholder="Enter your Message" onChange={this.handleChange}/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
);
}
handleChange(evt) {
this.setState({ [evt.target.name]: evt.target.value });
}
handleSubmit(event) {
this.setState({ messages: this.state.message });
alert('A name was submitted: ' + this.state.name + ' jjjjjj' + this.state.messages);
event.preventDefault();
}
}
As you can see in the handleSubmit(event) method, I'm setting the value of message to messages. But when I try to print messages, no value has been set. What is the mistake I'm doing here. Isn't this value need to be printed

Answer 1

setState is asynchronous. Try this:
handleSubmit(event) {
event.preventDefault();
this.setState({ messages: this.state.message }, () => {
alert('A name was submitted: ' + this.state.name + ' jjjjjj' + this.state.messages);
});
}
setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied.
https://reactjs.org/docs/react-component.html#setstate