Why is my input not updating? - React

Question

I can't figure out why my input is not updating. Here is my code:

state = {
    org: {
        orgName: ''
    }
};

updateInput = field => event => {
    this.setState({
        [field]: event.target.value
    })
}

render() {
    let { org } = this.state
    return (
        <input
            value={org.orgName}
            onChange={this.updateInput('orgName')}
        />
    )
}

I type data into the input. It calls updateInput and sets the state. When render is called, the org.orgNameis '' again. This should be working.

I have even added a log in the setState callback:

this.setState({
        [field]: event.target.value
}, () => console.log(this.state.org))

and it logs out the org info that has been entered into the input

What am I missing? How do I make this work?

Deryck · Accepted Answer · 2017-12-10 03:27:06Z

2

You have a nested object in your state - you are updating this.state.orgName instead of this.state.org.orgName

updateInput = field => event => {
    this.setState({
        [field]: event.target.value
    })
}

needs to be

updateInput = field => event => {
    this.setState({
        org: {
            ...this.state.org,
            [field]: event.target.value
        }
    })
}

Would recommend you avoid nesting objects in state though going forward. Will prove difficult to optimize later on.

answered Dec 10, 2017 at 3:27

Deryck

7,6662 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why is my input not updating? - React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related