1
00:00:02,510 --> 00:00:09,170
So we need to transform our products here on the client to make sure that we parse the values like

2
00:00:09,170 --> 00:00:16,280
decimal 128 or objectId which are not known by native javascript or by react, that we parse that into

3
00:00:16,280 --> 00:00:23,930
normal javascript primitive values. For that I'll add a new constant here, transformed products

4
00:00:24,530 --> 00:00:26,440
and I'll use a native javascript method,

5
00:00:26,510 --> 00:00:33,440
the map method to take an array, products and map every element in that array into a new element and return

6
00:00:33,440 --> 00:00:37,130
a new array of all these new elements and store it here.

7
00:00:37,130 --> 00:00:43,430
So map takes a function which will execute on every element in the array and the input here will

8
00:00:43,430 --> 00:00:44,660
basically be a product,

9
00:00:44,690 --> 00:00:48,180
you can name this however you want but we'll have a bunch of products in that array

10
00:00:48,650 --> 00:00:52,910
and then I return my changed version of that product.

11
00:00:52,910 --> 00:00:58,450
So therefore here, I will simply change two things, I'll change _id

12
00:00:58,700 --> 00:01:04,930
and here I take the existing _id and I call toString on it.

13
00:01:06,230 --> 00:01:08,870
The same is repeated for the price,

14
00:01:08,870 --> 00:01:13,180
I also call toString on that.

15
00:01:13,270 --> 00:01:19,920
Now if we save that, you see if we reload, it is working, it is fetching the data.

16
00:01:19,920 --> 00:01:25,470
The images are not displayed because the images were hosted on my backend which I deleted hence the

17
00:01:25,470 --> 00:01:26,690
images are lost now,

18
00:01:26,730 --> 00:01:32,220
we would have to pick publicly available images now when creating new products but this is working.

19
00:01:32,220 --> 00:01:33,970
So now we're retrieving the data and

20
00:01:34,030 --> 00:01:41,210
we're parsing the unknown types so that this works and so that we can get our data anonymously authenticated.

21
00:01:41,220 --> 00:01:46,500
Now let's try adding the other functionalities for adding, deleting and editing products.