So inside of react, you kind of save everything as a state.
So inside we will build a constructor for the component.
And the constructor takes in props and you pass in props to the.
The super component of this component it is actually can't remember exactly why you do it.
This is just something I always do inside react component.
And it's not something we use for any particular reason in this example.
But then we say this state, we set a specific state.
I will just by default set the Json to be an empty object.
And this is good for when it's a good practice for developers so they can see, okay inside the component,
we're using a the different properties here, we're using Json somewhere in this component and so on.
Now let's see.
So after we get the Json that's set.
Let's set the state of the Json.
So we say this set state.
And we put in Jason.
And this is a shorthand for saying, well, instead of saying Jason.
Jason liked that setting.
Jason to be this, we can just.
Put it as Json because it's the same name in both the state and the one we want to set.
Basically, this command is just setting the state of Json that we receive from the API to be this.
Now I have a pause in my debugger.
I'm not sure why.
I will just continue on.
And, uh, now, as I said, we need to display the results as well.
And the way we do that is to inside the render before the return call here, the return function, we
do a const of the products.
And so we map over the products here.
Actually, first, we want to check if this state of Jason and remember, it was the products array.
So we say products.
And this is going to check if the state has been set already.
Because actually, when we first start up the the app, the Json array is not being set or the products
array is not being the products array is not being set.
It's only after the component mounts and it fetches the products, then it's going to update the state
with the proper Json.
So the first render of this component does not have the products array.
That's why we have to have this.
If in here now, then if there is a products array, we do a map over it.
So this state dot Json dot products dot map.
And then we can say return for each product, we will return a just a div.
With a, let's say, a product name.
Like that.
And then.
Actually we should define products up here first products as null.
And then we define products here, if there is any products we got from the API.
And then we passed them in here.
Delete all this between the header.
And I put in my products.
Remember the creative phrases as a variable here.
And then we can see the text of all the products that we're getting here.
So and there's a warning here that each child in an array or iterator should have a unique key prop.
And this is something you require inside of React.
And so you need to pass in a key attribute here.
And you need to define a key.
And luckily each of these products have a ID, we can use the SRC.
Skew ID instead.
So let's say Praktisk.
SKU ID that's going to define our key.
And now the warning is gone.
Next up is we're going to put in an image or the image of the product.
So let's see.
Let's see.
Let's put in an image.
So it's just going to be an image like an image HTML element you pass in.
Well, we have the product image in here.
So products, we have media, which is an array main image with the path.
Now it's not a full URL path, so we have to figure out what is the full URL path of this image.
Let's go on to Nordstrom.
Let's figure it out what the full URL for this image is.
Let's search for red dresses.
And let's take a look at one of the images using Chrome developer tools.
And click this one.
And we can see.
Looks like there's an image up here.
So when I click on this one and you go one element up, this one with the image gallery store product
Zoom.
You can double click on the URL and then you can copy it, put it inside your URL up here and we see
a nice picture we get here.
And if I delete the query parameters after the Jpeg extension here, delete that.
Then we just get a pure picture.
And now you can see there's this path here and this is the path we can use from the result.
So if I go and take the path from the API result inside the media array for each product and I copy
that.
And I paste it inside this URL instead.
Let's remove the double slashes here and paste it inside the URL here.
Then I get an image.
So what we need to do.
Is.
You take this URL that we found from the Nordstrom site.
From clicking on one of the images, we take that URL and use it inside our React app.
So we go and define a.
We need to change this one to be a curly braces instead because we need to do a little logic in it to
define our, uh, URL.
So remove the parenthesis here and put.
In.
Curly brace.
Let's see.
Oh, it's because I haven't ended the image tag here.
That's why it was red and.
Let's see.
Mm.
But this is a must have one parent element.
Okay.
So in React, you need to have a surrounding parent element.
If you have multiple parent elements, you're returning.
Which means that you have to enclose it like this.
You can just.
And close it like that with two square.
I don't know.
No, not square, but arrow hits or whatever you call it.
And then since we have the curly braces now instead of the round parenthesis, we need to say return.
And surround this with a round parenthesis.
So.
And.
Yeah.
So it's giving me a warning about that.
I don't have any thing in here, but we're going to do that.
Now, let's see.
So remember to have the image URL.
Inside your.
Clipboard, which I didn't have.
So I need to go and find it again.
So I use developer tools and take this one.
Oops.
And then.
Cut out the.
Your URL, so we only get the Jpeg at the end.
Just like that.
Then I'm going to paste it in here.
And now we cut off this end here.
Actually, this one.
And then we say plus product and then we go and look inside the Json.
Actually, no, it doesn't show.
It is product media.
And then we just take the first element and we say.
Path?
I think it is, actually.
Let me take a look inside of Postman.
It is media for each product.
The media.
First item we can take.
And we say, okay.
So media first item path with a big capital P.
Like that.
And then we can pass in the image URL here.
Now let's see.
Let's see, people.
Oh.
Ah.
Is there no pictures yet?
Mm.
Let's see.
So it's still saying each child in an array should have a key property because we have the key attribute
down here, the div.
But we need to have one.
In the surrounding parent element.
So let's just make this into a div instead.
And then have a key, key property.
Let's see.
Why is it complaining has no corresponding closing tag.
That's because I need to have the.
The.
Closing tag.
This isn't okay.
Now, let's see if we can get some images.
I think I need to set maybe a width also.
Not.
I'm not sure that's what I'm missing right now.
Oh, yeah.
Okay.
So once I set a whiff.
The images actually appeared.
Or actually the images are so big when I don't set it that I didn't see it.
So set a width attribute.
And there we go.
Now we get some pictures.
Yep.
And next thing we need to do is we need to have a little fancy form at the top where we can say how
many results do we want to get and what kind of search term do we want to use?