WEBVTT 00:03.580 --> 00:08.770 So inside of react, you kind of save everything as a state. 00:10.070 --> 00:14.420 So inside we will build a constructor for the component. 00:15.650 --> 00:20.360 And the constructor takes in props and you pass in props to the. 00:20.630 --> 00:29.210 The super component of this component it is actually can't remember exactly why you do it. 00:29.210 --> 00:33.410 This is just something I always do inside react component. 00:34.870 --> 00:40.150 And it's not something we use for any particular reason in this example. 00:40.660 --> 00:45.190 But then we say this state, we set a specific state. 00:45.550 --> 00:49.390 I will just by default set the Json to be an empty object. 00:49.720 --> 00:57.010 And this is good for when it's a good practice for developers so they can see, okay inside the component, 00:57.010 --> 01:04.120 we're using a the different properties here, we're using Json somewhere in this component and so on. 01:06.010 --> 01:07.150 Now let's see. 01:07.150 --> 01:09.520 So after we get the Json that's set. 01:10.030 --> 01:12.370 Let's set the state of the Json. 01:12.370 --> 01:14.530 So we say this set state. 01:15.290 --> 01:17.750 And we put in Jason. 01:18.350 --> 01:24.770 And this is a shorthand for saying, well, instead of saying Jason. 01:25.500 --> 01:27.390 Jason liked that setting. 01:27.390 --> 01:30.360 Jason to be this, we can just. 01:30.760 --> 01:37.930 Put it as Json because it's the same name in both the state and the one we want to set. 01:39.490 --> 01:46.980 Basically, this command is just setting the state of Json that we receive from the API to be this. 01:49.170 --> 01:52.290 Now I have a pause in my debugger. 01:53.040 --> 01:54.150 I'm not sure why. 01:55.380 --> 01:57.300 I will just continue on. 01:59.460 --> 02:03.810 And, uh, now, as I said, we need to display the results as well. 02:05.120 --> 02:13.400 And the way we do that is to inside the render before the return call here, the return function, we 02:13.400 --> 02:16.970 do a const of the products. 02:18.030 --> 02:20.340 And so we map over the products here. 02:20.370 --> 02:32.880 Actually, first, we want to check if this state of Jason and remember, it was the products array. 02:33.680 --> 02:35.930 So we say products. 02:38.280 --> 02:43.230 And this is going to check if the state has been set already. 02:43.320 --> 02:51.540 Because actually, when we first start up the the app, the Json array is not being set or the products 02:51.540 --> 02:54.380 array is not being the products array is not being set. 02:54.390 --> 03:00.810 It's only after the component mounts and it fetches the products, then it's going to update the state 03:00.840 --> 03:02.670 with the proper Json. 03:02.670 --> 03:06.960 So the first render of this component does not have the products array. 03:06.960 --> 03:08.460 That's why we have to have this. 03:08.490 --> 03:15.560 If in here now, then if there is a products array, we do a map over it. 03:15.570 --> 03:20.340 So this state dot Json dot products dot map. 03:21.980 --> 03:30.560 And then we can say return for each product, we will return a just a div. 03:31.520 --> 03:34.580 With a, let's say, a product name. 03:37.520 --> 03:38.240 Like that. 03:41.060 --> 03:42.890 And then. 03:44.640 --> 03:51.270 Actually we should define products up here first products as null. 03:52.570 --> 03:59.470 And then we define products here, if there is any products we got from the API. 04:01.020 --> 04:03.480 And then we passed them in here. 04:03.630 --> 04:05.970 Delete all this between the header. 04:07.420 --> 04:10.120 And I put in my products. 04:10.360 --> 04:14.590 Remember the creative phrases as a variable here. 04:15.190 --> 04:19.870 And then we can see the text of all the products that we're getting here. 04:22.090 --> 04:29.260 So and there's a warning here that each child in an array or iterator should have a unique key prop. 04:29.260 --> 04:32.500 And this is something you require inside of React. 04:33.340 --> 04:37.120 And so you need to pass in a key attribute here. 04:38.330 --> 04:40.070 And you need to define a key. 04:40.070 --> 04:47.470 And luckily each of these products have a ID, we can use the SRC. 04:48.740 --> 04:51.410 Skew ID instead. 04:51.950 --> 04:55.130 So let's say Praktisk. 04:55.700 --> 05:00.400 SKU ID that's going to define our key. 05:00.410 --> 05:02.450 And now the warning is gone. 05:05.530 --> 05:11.110 Next up is we're going to put in an image or the image of the product. 05:12.610 --> 05:13.930 So let's see. 05:13.960 --> 05:14.730 Let's see. 05:14.740 --> 05:17.260 Let's put in an image. 05:18.450 --> 05:26.040 So it's just going to be an image like an image HTML element you pass in. 05:27.360 --> 05:30.840 Well, we have the product image in here. 05:30.840 --> 05:38.490 So products, we have media, which is an array main image with the path. 05:38.730 --> 05:45.690 Now it's not a full URL path, so we have to figure out what is the full URL path of this image. 05:46.630 --> 05:48.370 Let's go on to Nordstrom. 05:50.950 --> 05:54.430 Let's figure it out what the full URL for this image is. 05:56.580 --> 05:58.890 Let's search for red dresses. 06:02.170 --> 06:08.440 And let's take a look at one of the images using Chrome developer tools. 06:10.510 --> 06:11.980 And click this one. 06:16.260 --> 06:18.630 And we can see. 06:21.230 --> 06:23.240 Looks like there's an image up here. 06:25.320 --> 06:34.920 So when I click on this one and you go one element up, this one with the image gallery store product 06:34.930 --> 06:35.610 Zoom. 06:36.460 --> 06:45.250 You can double click on the URL and then you can copy it, put it inside your URL up here and we see 06:45.250 --> 06:47.050 a nice picture we get here. 06:47.530 --> 06:56.170 And if I delete the query parameters after the Jpeg extension here, delete that. 06:58.270 --> 07:00.190 Then we just get a pure picture. 07:01.170 --> 07:09.150 And now you can see there's this path here and this is the path we can use from the result. 07:09.800 --> 07:17.180 So if I go and take the path from the API result inside the media array for each product and I copy 07:17.180 --> 07:17.690 that. 07:18.660 --> 07:21.750 And I paste it inside this URL instead. 07:23.090 --> 07:27.830 Let's remove the double slashes here and paste it inside the URL here. 07:29.210 --> 07:31.070 Then I get an image. 07:31.070 --> 07:33.260 So what we need to do. 07:36.150 --> 07:36.990 Is. 07:38.390 --> 07:42.590 You take this URL that we found from the Nordstrom site. 07:46.540 --> 07:53.680 From clicking on one of the images, we take that URL and use it inside our React app. 07:55.590 --> 07:59.010 So we go and define a. 08:02.670 --> 08:10.380 We need to change this one to be a curly braces instead because we need to do a little logic in it to 08:10.380 --> 08:13.710 define our, uh, URL. 08:18.690 --> 08:23.490 So remove the parenthesis here and put. 08:24.320 --> 08:25.190 In. 08:25.850 --> 08:27.120 Curly brace. 08:30.620 --> 08:31.120 Let's see. 08:31.130 --> 08:31.790 Let's see. 08:39.700 --> 08:42.670 Oh, it's because I haven't ended the image tag here. 08:43.060 --> 08:45.760 That's why it was red and. 08:47.380 --> 08:47.820 Let's see. 08:47.830 --> 08:48.520 Let's see. 08:49.660 --> 08:49.840 Mm. 08:51.160 --> 08:53.400 But this is a must have one parent element. 08:53.640 --> 08:54.240 Okay. 08:54.600 --> 09:00.510 So in React, you need to have a surrounding parent element. 09:00.510 --> 09:04.320 If you have multiple parent elements, you're returning. 09:06.270 --> 09:09.690 Which means that you have to enclose it like this. 09:10.110 --> 09:10.980 You can just. 09:11.750 --> 09:16.130 And close it like that with two square. 09:16.160 --> 09:16.670 I don't know. 09:16.670 --> 09:21.020 No, not square, but arrow hits or whatever you call it. 09:21.350 --> 09:28.400 And then since we have the curly braces now instead of the round parenthesis, we need to say return. 09:30.610 --> 09:34.900 And surround this with a round parenthesis. 09:34.900 --> 09:35.770 So. 09:37.320 --> 09:38.430 And. 09:40.350 --> 09:40.860 Yeah. 09:40.860 --> 09:43.260 So it's giving me a warning about that. 09:43.260 --> 09:46.830 I don't have any thing in here, but we're going to do that. 09:47.580 --> 09:48.970 Now, let's see. 09:48.990 --> 09:52.200 So remember to have the image URL. 09:54.670 --> 09:55.960 Inside your. 09:57.710 --> 10:00.210 Clipboard, which I didn't have. 10:00.230 --> 10:02.180 So I need to go and find it again. 10:04.070 --> 10:08.300 So I use developer tools and take this one. 10:18.890 --> 10:19.820 Oops. 10:19.820 --> 10:20.870 And then. 10:21.880 --> 10:23.200 Cut out the. 10:24.330 --> 10:27.720 Your URL, so we only get the Jpeg at the end. 10:29.250 --> 10:30.330 Just like that. 10:30.780 --> 10:32.940 Then I'm going to paste it in here. 10:33.850 --> 10:37.720 And now we cut off this end here. 10:37.720 --> 10:38.890 Actually, this one. 10:40.360 --> 10:46.500 And then we say plus product and then we go and look inside the Json. 10:46.510 --> 10:48.160 Actually, no, it doesn't show. 10:49.370 --> 10:51.440 It is product media. 10:51.650 --> 10:55.280 And then we just take the first element and we say. 10:56.160 --> 10:57.080 Path? 10:57.090 --> 10:58.470 I think it is, actually. 10:59.340 --> 11:02.040 Let me take a look inside of Postman. 11:04.230 --> 11:07.080 It is media for each product. 11:07.110 --> 11:07.790 The media. 11:07.800 --> 11:09.750 First item we can take. 11:10.490 --> 11:13.310 And we say, okay. 11:14.360 --> 11:19.010 So media first item path with a big capital P. 11:20.930 --> 11:22.010 Like that. 11:22.160 --> 11:26.330 And then we can pass in the image URL here. 11:27.740 --> 11:28.760 Now let's see. 11:28.760 --> 11:29.620 Let's see, people. 11:29.630 --> 11:30.160 Oh. 11:30.830 --> 11:31.450 Ah. 11:31.520 --> 11:33.470 Is there no pictures yet? 11:34.460 --> 11:34.680 Mm. 11:36.830 --> 11:37.280 Let's see. 11:37.310 --> 11:38.030 Let's see. 11:38.660 --> 11:46.970 So it's still saying each child in an array should have a key property because we have the key attribute 11:47.000 --> 11:48.170 down here, the div. 11:48.170 --> 11:49.850 But we need to have one. 11:50.560 --> 11:53.980 In the surrounding parent element. 11:54.130 --> 11:56.800 So let's just make this into a div instead. 11:59.100 --> 12:02.700 And then have a key, key property. 12:05.270 --> 12:05.660 Let's see. 12:05.660 --> 12:09.110 Why is it complaining has no corresponding closing tag. 12:09.140 --> 12:11.750 That's because I need to have the. 12:12.800 --> 12:13.610 The. 12:14.750 --> 12:15.620 Closing tag. 12:15.620 --> 12:17.630 This isn't okay. 12:20.250 --> 12:23.910 Now, let's see if we can get some images. 12:24.630 --> 12:27.990 I think I need to set maybe a width also. 12:29.200 --> 12:29.370 Not. 12:29.390 --> 12:31.550 I'm not sure that's what I'm missing right now. 12:33.080 --> 12:33.520 Oh, yeah. 12:33.530 --> 12:34.040 Okay. 12:34.040 --> 12:36.260 So once I set a whiff. 12:37.090 --> 12:39.430 The images actually appeared. 12:40.630 --> 12:47.500 Or actually the images are so big when I don't set it that I didn't see it. 12:48.160 --> 12:50.830 So set a width attribute. 12:52.140 --> 12:53.150 And there we go. 12:53.160 --> 12:54.780 Now we get some pictures. 12:56.280 --> 12:57.050 Yep. 12:57.090 --> 13:04.200 And next thing we need to do is we need to have a little fancy form at the top where we can say how 13:04.200 --> 13:09.030 many results do we want to get and what kind of search term do we want to use?