I want to update an state object userInfo which contains an array named work which is an array of objects
My Database object userInfo looks like this
{
"_id":"61a6a1d64707c03465eae052",
"fullName": "Md Nurul Islam",
"works":
[
{
"isEditing": false,
"_id": "61a6a1d64707c03465eae053",
"company": "Amazon Logistics",
"position": "Sortation Associate",
"isCurrent": true
},
{
"isEditing": false,
"_id":"61a6a1d64707c03465eae054",
"company": "The Rani Indian Takeway",
"position": "Customer Service Assistant",
"isCurrent": false,
}
]
}
But I don't want update the database, i just want to update the state userInfo in frontend to go editing mood, for this when the user clicks edit next to work section, the properties isEditing will be toggled.
Below is my code
const [userInfo, setUserInfo] = useState(user);
const workToggleHandler = (work) =>
{
setUserInfo((prev) => {
prev.works.map((p) => {
if (p._id === work._id) {
p.isEditing = !p.isEditing;
}
return p;
});
return prev;
});
With this code, my state object is updated But my components are not re-rendered
you can put into the useEffect when particular state is updated then that effect will call
useEffect(()=>{
your code will go here
}[userInfo]),
React does not look at the data of the object but rather on the pointer of the object. Since this is not changed (only "prev" is edited, no new object with a new object address), it doesn't not rerender. A solution would be to copy the object.
let newUserInfo = Object.assign({}, prev);
newUserInfo.works.map((p) => {
if (p._id === work._id) {
p.isEditing = !p.isEditing;
}
return p;
});
return newUserInfo;Disclaimer: Maybe a deep copy is necessary....
I just changed my code on workToggleHandler function and its working completely as i want. Below my code
const [userInfo, setUserInfo] = useState(user);
const workToggleHandler = (work) => {
setUserInfo({
...userInfo,
works: userInfo.works.map((p) => {
if (p._id === work._id) {
p.isEditing = !p.isEditing;
}
return p;
}),
});
};