Gudmundur Gudmundur - 6 months ago 17
Javascript Question

React - state is inconsistent

What I'm trying to achieve: Pass data from child to parent.

How I'm trying to achieve it: Using

this.state
as described here

Not sure how to word the title: When I
console.log(this.state)
in the function in which I modify the state, the correct values in
this.state
are printed out. However, when I try to read the state in another function,
this.state
is apparently still at empty values.

constructor(props) {
super(props);
this.state = {
titleInputValue: "",
};
}

<form onSubmit={this.handleSubmit.bind(this)}>
<TextInput
val={this.state.titleInputValue}
changeHandler={this.textInputChangeHandler} />
</form>


// This is the function which can apparently only get the initial state
// title and body are empty strings, they should have values
handleSubmit(event) {
event.preventDefault();
const title = this.state.titleInputValue;
const body = this.state.bodyInputValue;
console.log(this.state);
Meteor.call('stories.insert',title,body);
}

// However, here the state is retrieved just fine.
// This is the function the child calls to update the state.
textInputChangeHandler(event) {
// This console.log call shows the correct state!
console.log(this.state);
this.setState({
titleInputValue: event.target.value,
});
}


TextInput
has attribute
onChange={this.props.changeHandler.bind(this)}


For illustration:

enter image description here

I wrote
asd
, and the state was successfully retrieved in
textInputChangeHandler
, which is the first two
console.log
calls, but then it's empty in
handleSubmit
.

Answer

This is because the event handler scope is not Component class level. When your component handles the event, it's context is the component (in your case TextInput ) not the parent.

You have to bind that function to this of Component class scope:

<TextInput
        val={this.state.titleInputValue}
        changeHandler={this.textInputChangeHandler.bind(this) } />

Using JavaScript bind you can specify the function context as well.

Comments