How do we correctly update an item in an object? I am trying to update the item isComplete = true or false basic on results from my db.response
If what I have is already correct can you please explain to me what is making it work
currently, I am using this.setState() which I am passing a prop to in my componentDidMount with the following values
{
"dbResponse": {
"__v": 0,
"_id": "6149f01736503d7aa9fb138b",
"instantMessage": false,
"isComplete": false
},
"operationType": "todo_update"
}
// Works
state = {
list: [], // This list is filled from a prop on component did mount
};
case 'todo_update':
const {list} = this.state;
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id === data.dbResponse._id,
);
//Update object's isComplete property.
list[objIndex].isComplete = data.dbResponse.isComplete;
break;
// Does not work. It removes the last object
case 'todo_update':
const listStore = [];
const {list} = this.state;
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id === data.dbResponse._id,
);
//Update object's isComplete property.
list[objIndex].isComplete = data.dbResponse.isComplete;
listStore.push(list[objIndex]);
setState({list: listStore})
break;
case 'todo_update':
const {list} = this.state;
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id === data.dbResponse._id,
);
//Update object's isComplete property.
list[objIndex].isComplete = data.dbResponse.isComplete;
break;
In this case state.list does get updated, but it doesn't re-render the Component. Because list[objIndex].isComplete = data.dbResponse.isComplete; is updating your state without using setState this is called Data Mutation. Which is not a correct way to update the state
// Does not work. It removes the last object
case 'todo_update':
const listStore = [];
const {list} = this.state;
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id === data.dbResponse._id,
);
//Update object's isComplete property.
list[objIndex].isComplete = data.dbResponse.isComplete;
listStore.push(list[objIndex]);
setState({list: listStore})
break;
In this listStore.push(list[objIndex]); is responsible for clearing you previous data. Since you are only pushing a single data listStore.push(list[objIndex]);.
case 'todo_update':
// This will avoid DataMutation
const {list} = { ...this.state };
//Find index of specific object using findIndex method.
const objIndex = list.findIndex(
obj => obj._id === data.dbResponse._id,
);
//Update object's isComplete property.
list[objIndex].isComplete = data.dbResponse.isComplete;
// This will update your state and re-render
setState({ list })
break;