Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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.

almost 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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))
almost 4 years ago · Santiago Trujillo Denunciar

0

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.

almost 4 years ago · Santiago Trujillo Denunciar

0

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};
});
almost 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda