ReactJS State not getting updated

Question

I am updating a state from child.

getInitialState : function(){
        return{
            VotedForTopic : false

        };
    },

updateVotedState:function(){
        this.setState({VotedForTopic:true});
        console.log(this.state.VotedForTopic)
    },

I am calling updateVotedState from the child when some action is performed to change the VotedForTopic state to true.But the state is not getting updated it remains false. What could be the problem

Answer 1

You can update parent state from child using callback which passed to child through props, like this

var Parent = React.createClass({
    getInitialState: function () {
        return {
            VotedForTopic: false
        };
    },

    updateVotedState: function () {
        this.setState({ VotedForTopic: true });
    },

    render: function() {
        return <div>
            <p>{'Current State:: ' + this.state.VotedForTopic} </p>
            <Child onUpdateVote={this.updateVotedState} />
        </div>;
    }
});

var Child = React.createClass({
    render: function() {
        return <a onClick={this.props.onUpdateVote}>updateVotedState</a>;
    }
});

Example

Answer 2

Does the state never update or are you relying on the console.log ? From the docs:

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

try passing a callback to setState:

updateVotedState:function(){
    var that = this;
    this.setState({VotedForTopic:true}, function(){
        console.log(that.state.VotedForTopic)
    });
},