I'm fetching data from redux store with useSelector.
const customerProduct = useSelector((state) => state.objects.customersProducts[match.params.customerProductId]);
If I log the data it is displayed like this in the console:
Once I try to use spread operator to create a new object, it would lose all the values with (...).
Like this:
const updatedCustomerProduct = { ...customerProduct, newValue: "abc" };
I would get an output like this:
const uptdatedCustomerProduct =
{
"id": "AALzgGxtlg",
"_objCount": 6360,
"newValue": "abc",
"className": "customerOfferMetadata"
}
What's going on here? How could I handle these values? If I copy the object from the console the object is perfectly visible.
Even in redux dev tools the data is displayed like this:
{
"entityInfo": {
"productId": 441,
"bundleOfferId": 22
},
"title": {
"us": "Special Offer"
},
"desc": {
"us": "6 months"
},
"order": 0,
"enabled": true,
"entityType": "product",
"detailsUrl": "www.google.com",
"thumb": {
"__type": "Pointer",
"className": "Resource",
"objectId": "12345"
},
"createdAt": "2021-02-26T18:48:25.358Z",
"updatedAt": "2021-09-21T21:41:49.384Z",
"clientId": 1,
"objectId": "AALzgGxtlg"
}
I'm not sure what code is generating those objects for you, but when you see properties in the console that are semitransparent, they are non-enumerable. This means that when applying the spread operator, they are not iterated over, and hence they do not make it into the new object.
To make all properties enumerable, check out the question Make all properties enumerable.