CODEWITHSUNDEEP
javascriptmeteorreactjs
KSHMR
KSHMR

Reputation: 809

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.

Upvotes: 0

Views: 377

Answers (1)

Rosmarine Popcorn
Rosmarine Popcorn

Reputation: 10965

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.

Upvotes: 2

Related Questions