How to merge object with same key in react

Question

My data is shaped like: [{size: ["large", "medium"]}, {color: ["red", "green"]}]

Form Page:

const optionSubmit = (e) => {
    const name = e.target.name;

    const storeValue = { [name]: productValue };
    addData(storeValue);
};

formContext page:

const addData= (newData) => {
    setData(() => [...data, newData]);
}

The problem is when I change size object example its showing like: [ {size: ["large", "medium"]}, {color: ["red", "green"]}, {size: ["large", "medium", "small"]} ]

I want this array to become like this:

[{color: ["red", "green"]},{size: ["large", "medium", small]}]

Does this answer your question? [Merge JavaScript objects in array with same key](https://stackoverflow.com/questions/33850412/merge-javascript-objects-in-array-with-same-key) — Heretic Monkey, Dec 17 '21 at 12:52

score 2 · Answer 1 · answered Dec 17 '21 at 12:53

2

You are taking your existing object and spreading it into a new array, and then adding the newData into that new array too. That is why you see this behavior.

Instead you can do this a couple of ways but something like this using Object.assign:

const addData= (newData) => {
  setData(() => Object.assign({}, data, newData};
}

Or if your newData is an object only containing the {size: []} then you could just do this:

const addData= (newData) => {
  setData(() => {...data, ...newData};
}

answered Dec 17 '21 at 12:53

maxshuty

9,708
13
64
77

data is an array with but new data is coming as an object example: [{color: ["red", "green"]},{size: ["large", "medium", "small"]}] – Kamalesh Maity Dec 17 '21 at 13:02
1

Thank you sir first one worked – Kamalesh Maity Dec 17 '21 at 13:05

score 0 · Answer 2 · answered Dec 17 '21 at 12:51

0

const myArr = [
    {size: ["large", "medium"]}, 
    {color: ["red", "green"]}, 
    {size: ["large", "medium", "small"]}
   ];
const result = [];
  myArr.forEach(e=>{
    const key = Object.keys(e)[0];
    const i = result.findIndex(r=>Object.keys(r)[0]==key);
    if(i>=0){
    result[i]= {...result[i],...e};
    }else{
    result.push(e)
    }
}) 
console.log(result)

answered Dec 17 '21 at 12:51

abhishek sahu

648
4
8

updated the answer now check. – abhishek sahu Dec 17 '21 at 12:56
i have find an easy way thats why i didn't tried it but thanks for helping – Kamalesh Maity Dec 17 '21 at 13:07

How to merge object with same key in react

2 Answers2