react state change doesn't work as expected

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

Possible duplicate of [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) — kingdaro, Oct 10 '18 at 22:54
Not an explicit duplicate, but that answer should hopefully answer the question — kingdaro, Oct 10 '18 at 22:55

wdm · Accepted Answer · 2018-10-10T23:18:48.607

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

edited Oct 10 '18 at 23:18

answered Oct 10 '18 at 23:02

wdm

7,121
1
27
29

works fine. thank you..What is the difference between the earlier and this approach? – user3789200 Oct 10 '18 at 23:07
1

The code in the `setState` callback executes once the state has finished updating. In your code `alert` was being called before `setState` finished updating the state because `setState` is asynchronous. Explanation: https://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean – wdm Oct 10 '18 at 23:12

react state change doesn't work as expected

1 Answers1