So we need to transform our products here on the client to make sure that we parse the values like
decimal 128 or objectId which are not known by native javascript or by react, that we parse that into
normal javascript primitive values. For that I'll add a new constant here, transformed products
and I'll use a native javascript method,
the map method to take an array, products and map every element in that array into a new element and return
a new array of all these new elements and store it here.
So map takes a function which will execute on every element in the array and the input here will
basically be a product,
you can name this however you want but we'll have a bunch of products in that array
and then I return my changed version of that product.
So therefore here, I will simply change two things, I'll change _id
and here I take the existing _id and I call toString on it.
The same is repeated for the price,
I also call toString on that.
Now if we save that, you see if we reload, it is working, it is fetching the data.
The images are not displayed because the images were hosted on my backend which I deleted hence the
images are lost now,
we would have to pick publicly available images now when creating new products but this is working.
So now we're retrieving the data and
we're parsing the unknown types so that this works and so that we can get our data anonymously authenticated.
Now let's try adding the other functionalities for adding, deleting and editing products.