DevFlow

DevOverflow

Search
Menu
DevFlow

DevOverflow

Home menu icon

Home

Community menu icon

Community

Collections menu icon

Collections

Find Jobs menu icon

Find Jobs

Tags menu icon

Tags

Ask a question menu icon

Ask a question

    Profile

    Juan Cruz Cáceres

    upvote

    0

    downvote

    0

    star

    Why does calling react setState method not mutate the state immediately?

    clock icon

    Asked 10 months ago

    message

    0 Answers

    eye

    1 Views

    430

    I'm reading Forms section of reactjs documentation and just tried this code to demonstrate onChange usage (JSBIN).

    var React= require('react');
    
    var ControlledForm= React.createClass({
        getInitialState: function() {
            return {
                value: "initial value"
            };
        },
    
        handleChange: function(event) {
            console.log(this.state.value);
            this.setState({value: event.target.value});
            console.log(this.state.value);
    
        },
    
        render: function() {
            return (
                <input type="text" value={this.state.value} onChange={this.handleChange}/>
            );
        }
    });
    
    React.render(
        <ControlledForm/>,
      document.getElementById('mount')
    );
    

    When I update the <input/> value in the browser, the second console.log inside the handleChange callback prints the same value as the first console.log, Why I can't see the result of this.setState({value: event.target.value}) in the scope of handleChange callback?

    javascript
    reactjs

    Write your answer here

    0 Answers

    Menu

    Top Questions

    How to center a div?

    chevron

    How to do code parsing with React.js and NextJS?

    chevron

    How to get better at Nextjs?

    chevron

    Postgres: upgrade a user to be a superuser? ?

    chevron

    This is another test question

    chevron

    Popular Tags

    nextjs

    6

    React

    4

    next.js

    3

    reactjs

    3

    css

    3