React - Update or Replace an Object with in the State object-CodePudding

I have an State varaible with array of objects like this.

type State = {
  Dp: ArrayDataProvider<string, Message>;
};

Inside Dp i will have data which will hold the data in the form of array like this.

 [{
    "id": 1,
    "name": "January",
    "abc": abc,
    "xyz": xyz
}, {
    "id": 2,
    "name": "February",
    "abc": abc,
    "xyz": xyz
}]

I want to replace the object which is having id 2 with the different object and i want to have my object like this .

 [{
    "id": 1,
    "name": "January",
    "abc": abc,
    "xyz": xyz
}, {
    "id": 2,
    "name": "New month",
    "abc": 1234abc,
    "xyz": someVlaue
}]

how to do it in efficient way with typescript in react. I have done something like this but not working

 const data = this.state.Dp?.data.slice();
  const index = data.findIndex(currentItem => {
    return currentItem.id === updateData[0].id;
  });
  data[index] = updateData;
  this.state.Dp.data = data;
  this.setState({ Dp: this.state.Dp });

CodePudding user response：

I use map to do this:

const data = this.state.Dp?.data.map(currentItem => {
  return currentItem.id === updatedItem.id ? updatedItem : currentItem;
})

map creates a new array with the items from the previous array, but it gives you an opportunity to make adjustments to the items in the new array as it iterates through them. In my example, I'm checking the id of the item to see if it's the one you want to update, and swapping in your updatedItem if the ids match.

I'm not sure about the TypeScript part, to be honest. I haven't worked with it yet.

Note - I'm not sure what form your updateData is in, so you might have to adjust that. It seems like you want it to be an object, but in one of your lines you're treating it like an array.

CodePudding user response：

Use findIndex to find index of the object where id is equal 2, then replace new object to that place.

let tempArray = [...array];
const index = tempArray.findIndex((element) => element.id === 2);
tempArray[index] = {
  id: 2,
  name: "New month",
  abc: "1234abc",
  xyz: "someVlaue"
};
setArray(tempArray);