updating value of object inside of array based on id of different object in different array in react-CodePudding

if I have an array like this:

const[arr,setArr] = React.useState([
{label:"dummy01",id:2},
{label:"dummy02",id:5},

])

is there anyway to update arr with such array:

const newArray = [{label:'dummy Altered01',id:2},{label:'different',id:10},{label:'different 02',id:55}}

what I expect to have an array like this :

[
{label:"dummy Altered01",id:2},
{label:"dummy02",id:5},
{label:'different',id:10},
{label:'different 02',id:55}
]

as you can see the object with the id of 2 is updated and other new objects are added to the array without erasing previous dummy02.

I don't know how should I compare id inside of two different arrays

CodePudding user response：

Lets consider

a = [{label:"dummy01",id:2},{label:"dummy02",id:5}]

and new array is

b= [{label:'dummy Altered01',id:2},{label:'different',id:10},{label:'different 02',id:55}]

Now perform itearation over new array

b.forEach((item)=>{
    let index = a.findIndex((x)=>x.id == item.id) 
    if(index > -1){
       a[index].label = item.label
    }
    else
    a.push(item)
})

console.log(a)

CodePudding user response：

I know this is not the best answer, so here's what I got

let listOfIds = newArray.map(item => item.id)
newArray = newArray.concat(arr.filter(item => !listOfIds.includes(item.id)))

First you map the newArray into a list of IDs. Then newArray concatenates with the filtered original array (i.e. the array now doesn't have any items with ids in common with the latter )

Finally you update the state by setArr(newArr)

Hope this answers your question