In the last section we started talking about Remax ref system.
So let's get to it and start creating a ref inside of our image card component inside if you're going
to define my constructor function.
Remember this thing gets called with some props and we have to call super with those props then right
underneath that i going to say this image ref is re-act create ref.
So that's it right there that's how we create a reference we call re-act create ref then we assign it
to some instance variables that we can refer back to it later on inside of our class.
Now deep down inside my render method I'm going to find my image tag and I'm going to pass a new prop
to it called as you might guess.
Simply ref and the value for this prop is going to be this dot image ref.
All right.
That's it.
That's all we have to do to wire up a ref.
Now any place inside this component that we want to we can reference this image ref and it will tell
us a little bit about this image Dohm note.
One thing I want to remind you about very quickly is that when we write out the image tag right here
this is a GSX tag.
This is not a dom element.
The GSX tag is going to be eventually turned into a dom element but we don't have any good way of somehow
getting a handle on the Dom element that is being produced by this very specific image tag right you're
outside of the ref system.
The ref system is how we somehow get a handle on some particular element that is generated by a tag.
OK so now in order to access this image ref Let's try defining our component did MT lifecycle method
and then inside if you're going to console log.
This dot image.
RATH So now we're essentially going through the same series of steps that we just mentioned over here.
So we're going to let the image card render itself and its image has remembered the component and mount
only gets called after the thing gets rendered.
So after the thing gets rendered we're went to console log out that entire Dohm noted that entire image
and we are essentially reaching in the Dom to get it through that ref system.
OK so let's make sure we save this file save your image card.
Now flip back over and I'll do another search for cars.
Zane you'll see that we get 10 council logs or so right here from each of the image cards inside of
our application.
So the ref itself is a javascript object that has a current property and the current property references
a dom node.
In this case the image.
Now on this image object right here you'll notice that we have that same client height that we had before
when we did the documentary selector.
So if we wanted to we could very easily print out the height of each one of these individual images
by doing something like this.
Image Tref current dot client height like so so we could take that right there and set it on our states.
But first let's do a quick log and just make sure that we're going down the right path.
All right so I'm going to save that file.
My app already reloaded.
So I going to search for cars and lo and behold we got our results over here of zero.
All right well everything appeared to be going along just swimmingly until this right here.
I like seeing a high of zero right there is kind of a surprise.
I'll tell you what let's try cons. liking out this dot image ref currents.
And then right after it we will console log out the client.
Right.
OK.
So let's try this out.
I'll save that file.
I'm going to enter in cars.
Now I see a ton of stuff here.
So I see without a doubt.
And you know it's really hard to reference this image.
Let's go back to just doing image reft by itself so this image that's going to make this a little bit
easier to understand.
So do cars again.
All right.
That's better.
So now I see that I've got a height of 0 on each one of these images.
What if I expand one of them and look at that image in particular it is telling me right here in no
uncertain terms that has a height of 140.
But when I counsel logged it out two seconds later or a millisecond later for that matter it said zero.
And I definitely don't have any typos in here.
So what is going on.
Well it's simultaneously confusing and makes a ton of sense.
So here's what happens.
All right the first thing I need to understand is that in Chrome or whatever browser you are using this
console right here this thing that we used to print out information is extremely fancy.
When we print out that ref and we see this object right here that says Current and an image the console
does not yet know exactly what data is inside of that image right there or that Dom node of image the
console only knows what the height is.
Once we expand that object and then expand current image when you click on like that arrow right then
proem looks at that Dom node pulls a bunch of information out of it and prints it on the console right
here for you to see.
So in other words you are seeing when you click and expand these little dots right here you are seeing
information at that very particular instant time like when you expand that thing from just when into
that Dohm node and pulled out all of these different properties.
To tell you more about that image tag.
So does that help us understand what's going on here.
Well maybe kind of here's what's happening when art component first renders the next seconds like the
instant after the thing renders.
We are printing out the height of the image.
Now the instant after we have rendered this image the image itself has not actually loaded remember
these image tasks that we're showing here like this image.
This is a dom element and the DOM element is going to attempt to make a request to some outside service.
In this case an splash to actually load up the raw image file.
I'm not talking about the API here I'm talking about reaching out to that you are well that we are referencing
inside of the image tag is the source like reaching out to that you are Ehle right there in downloading
the image.
So essentially what we're seeing here is we render Arkham phone to the screen the very next instant
before the image has had a chance to download itself.
We console log out the height of the image.
At that point we haven't download the image.
There is no image there.
And so the image tag has a height of zero pixels.
So the reason we see zero here for every one of these results is because we are a console log in these
values out before we have even had a chance to load the image up.
So then later on you come along here and you expand this object and you look at this image property.
Well at this point yeah we've downloaded the image we've had the image just fine now.
So now we can very easily look at the saying and reference the client height.
So essentially it's the order of operations thing.
If we try to access the height of the image directly from the component did mount method Well that's
going to be way too early too early to get the height because we do not yet have the image loaded up.
All right.
So I'm sure that this all you know this is like yet another challenge we're adding on here.
There is an easy workaround.
The challenge is just understanding why we see a height of like 167 from the ref itself.
But then 0 when we directly log out the height as long as you understand that you're in a good spot.
All right.
So let's take a pause right here.
When we come back in the next section we're going to figure out how we can do a tiny tiny little every
factor to the component.
Did mount method and make sure that we only try to access the height after it has become available.
OK.
So quick pause.
I'll see you in just a minute.