Merge object with React state

Question

Say, I have an object that looks like this:

{
foo: bar,
foo-one: bar-one,
foo-two: bar-two
}

and I have a React state. How can I merge object with state, so object keys will become state keys and object values will become state values apart from standart:

this.setState({
   foo: this.obj.foo,
   foo-one: this.obj.bar-one,
   foo-two: this.obj.bar-two
})

@Thomas setState is fine. Thing is, my object is quite large. I wanted to know whether I can write less code without making setState big, as I have about 20 keys in my object — Алексей Николаев
– Алексей Николаев, Commented Mar 11, 2021 at 14:46
You know that you only have to set the keys that you actually want to change (in class components). You don't have to pass in the entire state every time. — Thomas
– Thomas, Commented Mar 11, 2021 at 14:49

Gabriel Filipake · Accepted Answer · 2021-03-11 15:02:18Z

1

You can do that way:

setYourObjectInState = () => {
    const objectWithNewValues = {
        foo: bar,
        foo-one: bar-one,
        foo-two: bar-two
    };

    this.setState({
        ...objectWithNewValues
    )};
}

EXAMPLES OF SET STATE + SPREAD OBJECTS USAGE: Or create an object in your function to reproduce your state and then add the keys with values that you want.

setYourObjectInState = () => {
    const yourObjectInState = {
        ...this.state.yourObjectInState,
        foo: bar,
        foo-one: bar-one,
        foo-two: bar-two
    };

    this.setState({
        yourObjectInState
    )};
}

Or you can simply do like

setYourObjectInState = () => {
    const yourNewObject = {
        foo: bar,
        foo-one: bar-one,
        foo-two: bar-two
    };

    this.setState({
        yourObjectInState: {
            ...this.state.yourObjectInState,
            ...yourNewObject
        }
    )};
}

or even:

setYourObjectInState = () => {
    this.setState({
        yourObjectInState: {
            ...this.state.yourObjectInState,
            foo: bar,
            foo-one: bar-one,
            foo-two: bar-two
        }
    )};
}

edited Mar 11, 2021 at 15:02

answered Mar 11, 2021 at 14:46

Gabriel Filipake

1114 bronze badges

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

2 Comments

Thomas Over a year ago

Why are you doing setStates job? What's wrong with OPs code? It will automatically (flat) merge the current state with the changes passed in. So why do you manually merge the changes with the previous state? And what's the benefit of this extra object?

Gabriel Filipake Over a year ago

I just created an example object to explain, he doesn`t need to create a new one, i will edit with the optional setState creation without a new object (just for readability).

Collectives™ on Stack Overflow

Merge object with React state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related