setting a single property using setState for an object in reactJS [duplicate]

Question

I'm trying to update the property 'name' of my object person using setState. But it doesn't seem to work. I'm getting the 'newName' through user input.

What am I missing here?

this.setState({ person: { name: newName } });

Some more context would be a big help, the full source of your component for example. At the very least, the shape of your state and the function that this setState is being done in. I suspect it's an issue with how setState only merges in the top level of object keys — kingdaro
– kingdaro, Commented Mar 13, 2018 at 4:58
by this way, person object will loose all other keys, only name will be their after update, check this answer: updating an object with setState — Mayank Shukla
– Mayank Shukla, Commented Mar 13, 2018 at 4:59
this.setState(state => ({ person: Object.assign({}, state.person, { name: newName }) })); — Felix Kling
– Felix Kling, Commented Mar 13, 2018 at 5:00

Harsh Makadia · Accepted Answer · 2018-03-13 05:01:35Z

1

class TestJS extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            person : {name : "DefaultName", age : 56}
        }
    }

    componentDidMount(){
        this.setState(state => ({ person: Object.assign({}, state.person, { name: "sdsds" }) }));
    }

    render() {
        return(
            <div id="root">
                {this.state.person.name}
                {this.state.person.age}
                <p>Hello world</p>
            </div>

        );
    }
}

export default TestJS;

answered Mar 13, 2018 at 5:01

Harsh Makadia

3,4436 gold badges36 silver badges43 bronze badges

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

1 Comment

Sunny Over a year ago

Does it have any performance issues if I use this - this.setState(prevState => ({ person: { ...prevState.person, name: newName } }));

Collectives™ on Stack Overflow

setting a single property using setState for an object in reactJS [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related