In the last video we discussed why we were seeing a image ref with a set client height.
But then we can slug the value right after it and saw a height of zero.
So as we mentioned it's just the order of loading this stuff up.
We're trying to get the height before the image has already been or has been downloaded from.
Splash.
So in order to fix this all we're going to do is reference this image ref current.
Remember that gives us a direct reference to that image tag and then we're going to add an event listener
to it.
Now this is not an event handler like in the re-act world.
This is a very basic very plain vanilla javascript and aged female event listener.
So in order to do so I'll say an event listener and we're going to listen for the event load any time
that a image like this image right here successfully loads up or downloads an image from the internet
and displays on the screen it emits this load event.
And so once it emits this load even that means that we now have successfully downloaded the image it's
being displayed on the screen.
So now we can go ahead and get the actual height of the image.
All right.
So as a callback to the saying I'm going to add on A or A second argument here or I'll put in a callback.
We're going to call this thing this set Spatz and they'll define a set span's property on my class.
Now the reason that I'm calling a set span's right here is because remember the ultimate property that
we're trying to really set inside this thing was called The Grid row and property and it took units
of span's.
So this method is maybe not super clearly labeled but trust me it will make sense in just a little bit.
Essentially when we get that height we're going to use it to determine a span value.
You'll see what we're doing with it in like half a second.
Now without going into like another rabbit hole here.
Notice how we are passing a callback to a eventless and right here we've made a huge deal in the last
couple of videos about how callbacks have to be bound.
Otherwise the value of this is undefined.
So I'll tell you right now that's going be an issue here.
So we're going to make sure that we create set span's as an arrow function like so.
So now inside of here let's just make sure that we can get the correct height of each image or do a
console log.
This dot image ref remember that returns an object with a current property.
So let's say current and then I want to get my client height out of there.
OK so let's save this and we'll try this out.
And I think this is going to work just fine.
It's all flip back over let's do cars and now I see the correct height for each of those images.
Perfect.
All right.
So let's take another pause here.
When I come back the next section the very last thing we do is calculate exactly how many grid row and
units set it on our state and then feed that in as a style to our image tag itself and that's it will
be all set.
So quick pause and I'll see you in just a minute.