1 00:00:00,680 --> 00:00:05,020 In the last video we discussed why we were seeing a image ref with a set client height. 2 00:00:05,070 --> 00:00:08,580 But then we can slug the value right after it and saw a height of zero. 3 00:00:08,580 --> 00:00:12,010 So as we mentioned it's just the order of loading this stuff up. 4 00:00:12,030 --> 00:00:15,780 We're trying to get the height before the image has already been or has been downloaded from. 5 00:00:15,840 --> 00:00:16,600 Splash. 6 00:00:16,800 --> 00:00:22,500 So in order to fix this all we're going to do is reference this image ref current. 7 00:00:22,740 --> 00:00:27,990 Remember that gives us a direct reference to that image tag and then we're going to add an event listener 8 00:00:27,990 --> 00:00:28,770 to it. 9 00:00:28,770 --> 00:00:32,260 Now this is not an event handler like in the re-act world. 10 00:00:32,280 --> 00:00:38,230 This is a very basic very plain vanilla javascript and aged female event listener. 11 00:00:38,250 --> 00:00:45,810 So in order to do so I'll say an event listener and we're going to listen for the event load any time 12 00:00:45,810 --> 00:00:51,660 that a image like this image right here successfully loads up or downloads an image from the internet 13 00:00:51,690 --> 00:00:55,070 and displays on the screen it emits this load event. 14 00:00:55,090 --> 00:00:59,460 And so once it emits this load even that means that we now have successfully downloaded the image it's 15 00:00:59,460 --> 00:01:00,700 being displayed on the screen. 16 00:01:00,730 --> 00:01:04,350 So now we can go ahead and get the actual height of the image. 17 00:01:04,350 --> 00:01:04,650 All right. 18 00:01:04,650 --> 00:01:10,790 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. 19 00:01:11,010 --> 00:01:19,930 We're going to call this thing this set Spatz and they'll define a set span's property on my class. 20 00:01:19,930 --> 00:01:24,520 Now the reason that I'm calling a set span's right here is because remember the ultimate property that 21 00:01:24,520 --> 00:01:30,400 we're trying to really set inside this thing was called The Grid row and property and it took units 22 00:01:30,460 --> 00:01:31,710 of span's. 23 00:01:31,720 --> 00:01:37,330 So this method is maybe not super clearly labeled but trust me it will make sense in just a little bit. 24 00:01:37,330 --> 00:01:41,300 Essentially when we get that height we're going to use it to determine a span value. 25 00:01:41,350 --> 00:01:44,250 You'll see what we're doing with it in like half a second. 26 00:01:44,490 --> 00:01:47,480 Now without going into like another rabbit hole here. 27 00:01:47,490 --> 00:01:53,220 Notice how we are passing a callback to a eventless and right here we've made a huge deal in the last 28 00:01:53,220 --> 00:01:55,850 couple of videos about how callbacks have to be bound. 29 00:01:55,860 --> 00:01:57,900 Otherwise the value of this is undefined. 30 00:01:58,020 --> 00:02:00,170 So I'll tell you right now that's going be an issue here. 31 00:02:00,240 --> 00:02:06,380 So we're going to make sure that we create set span's as an arrow function like so. 32 00:02:06,420 --> 00:02:11,250 So now inside of here let's just make sure that we can get the correct height of each image or do a 33 00:02:11,250 --> 00:02:12,730 console log. 34 00:02:13,150 --> 00:02:18,120 This dot image ref remember that returns an object with a current property. 35 00:02:18,130 --> 00:02:23,000 So let's say current and then I want to get my client height out of there. 36 00:02:23,750 --> 00:02:25,800 OK so let's save this and we'll try this out. 37 00:02:25,850 --> 00:02:28,280 And I think this is going to work just fine. 38 00:02:28,560 --> 00:02:35,360 It's all flip back over let's do cars and now I see the correct height for each of those images. 39 00:02:35,360 --> 00:02:36,580 Perfect. 40 00:02:36,590 --> 00:02:36,830 All right. 41 00:02:36,840 --> 00:02:38,100 So let's take another pause here. 42 00:02:38,110 --> 00:02:43,790 When I come back the next section the very last thing we do is calculate exactly how many grid row and 43 00:02:43,790 --> 00:02:49,570 units set it on our state and then feed that in as a style to our image tag itself and that's it will 44 00:02:49,580 --> 00:02:50,440 be all set. 45 00:02:50,570 --> 00:02:52,740 So quick pause and I'll see you in just a minute.