How can I merge this object into another one to update in React?

Question

Let's suppose I have the following object in React:

{
  name: 'John Max',
  plan: { active: true }
}

And then, I have the following object:

{ fields: { "plan.active": false } }

How can I adapt this object in order to replace with the current object?

So, in this example, the plan[active] would become false instead of true. That would be the only change.

Rodrigo Rodrigues · Accepted Answer · 2022-09-29T06:09:20.907

2

You can implement a simple function that traverses the object by passing a path, that you can take from splitting your object key on the dots.

Something like this:

setpath = ([p,...ps], v, o) => ps.length ? setpath(ps, v, o[p]) : o[p] = v


const data = { name: "John Max", plan: { active: true } }
const input = { fields: { "plan.active": false } }

let [path, val] = Object.entries(input.fields)[0]  // path="plan.active", val=false

setpath(path.split("."), val, data)
console.log(data)  // {name: "John Max", plan: {active: false}}

If you plan to have multiple path-like fields in under fields, and want to update all of them in the object, you can use Array.foreach:

Object.entries(input.fields).forEach(([p,v]) => setpath(p.split("."), v, data))

edited Sep 29 '22 at 06:09

answered Sep 29 '22 at 05:04

Rodrigo Rodrigues

7,545
1
24
36

Would you be able to help me with one more thing? https://hastebin.com/dotadegomu.js - I want know to only transform the object with strings into a normal one. – jhnxx Sep 29 '22 at 06:29
Better post it as a new question – Rodrigo Rodrigues Sep 29 '22 at 06:30
Okay, I will post it now. – jhnxx Sep 29 '22 at 06:31
https://stackoverflow.com/questions/73891210/how-can-i-transform-this-object-with-strings-into-a-normal-one – jhnxx Sep 29 '22 at 06:35

score 1 · Answer 2 · answered Sep 29 '22 at 05:59

In case if you have multiple properties to modify in the object then you can create two reduce loops & modify the source data. Something like this:

const source =   {name: 'John Max', plan: {active: true}, newObj: {testObj: {name: 'Old name'}}};

const target = { fields: { "plan.active": false, "newObj.testObj.name": 'New Name' } };

const modify = (source, target) => {
    return Object.entries(target.fields).reduce((acc, [k, v]) => {
        k.split('.').reduce((a, e, i) => {
            a[e] = i == k.split('.').length - 1 ? v : {};
            return a[e];
        }, acc);
        return acc;
    }, source);
};
console.log(modify(source, target));

As you can see there are multiple nested objects & modify method will mutate & return the source object.

score -1 · Answer 3 · answered Sep 29 '22 at 05:10

Note Unlike the setState method found in class components, useState does not automatically merge update objects. You can replicate this behavior by combining the function updater form with object spread syntax:

 setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

How can I merge this object into another one to update in React?

3 Answers3