1
00:00:01,040 --> 00:00:03,940
In the last section we started talking about Remax ref system.

2
00:00:04,160 --> 00:00:09,590
So let's get to it and start creating a ref inside of our image card component inside if you're going

3
00:00:09,590 --> 00:00:12,700
to define my constructor function.

4
00:00:12,750 --> 00:00:18,630
Remember this thing gets called with some props and we have to call super with those props then right

5
00:00:18,660 --> 00:00:24,870
underneath that i going to say this image ref is re-act create ref.

6
00:00:24,870 --> 00:00:29,730
So that's it right there that's how we create a reference we call re-act create ref then we assign it

7
00:00:29,730 --> 00:00:34,810
to some instance variables that we can refer back to it later on inside of our class.

8
00:00:34,860 --> 00:00:40,650
Now deep down inside my render method I'm going to find my image tag and I'm going to pass a new prop

9
00:00:40,650 --> 00:00:42,350
to it called as you might guess.

10
00:00:42,390 --> 00:00:48,710
Simply ref and the value for this prop is going to be this dot image ref.

11
00:00:48,730 --> 00:00:48,950
All right.

12
00:00:48,960 --> 00:00:49,320
That's it.

13
00:00:49,320 --> 00:00:51,480
That's all we have to do to wire up a ref.

14
00:00:51,580 --> 00:00:57,340
Now any place inside this component that we want to we can reference this image ref and it will tell

15
00:00:57,340 --> 00:01:00,170
us a little bit about this image Dohm note.

16
00:01:00,310 --> 00:01:04,180
One thing I want to remind you about very quickly is that when we write out the image tag right here

17
00:01:04,390 --> 00:01:06,230
this is a GSX tag.

18
00:01:06,370 --> 00:01:08,430
This is not a dom element.

19
00:01:08,500 --> 00:01:14,920
The GSX tag is going to be eventually turned into a dom element but we don't have any good way of somehow

20
00:01:14,920 --> 00:01:20,350
getting a handle on the Dom element that is being produced by this very specific image tag right you're

21
00:01:20,680 --> 00:01:22,760
outside of the ref system.

22
00:01:23,050 --> 00:01:30,320
The ref system is how we somehow get a handle on some particular element that is generated by a tag.

23
00:01:30,330 --> 00:01:39,260
OK so now in order to access this image ref Let's try defining our component did MT lifecycle method

24
00:01:39,800 --> 00:01:42,220
and then inside if you're going to console log.

25
00:01:42,410 --> 00:01:44,010
This dot image.

26
00:01:44,050 --> 00:01:48,790
RATH So now we're essentially going through the same series of steps that we just mentioned over here.

27
00:01:48,920 --> 00:01:53,960
So we're going to let the image card render itself and its image has remembered the component and mount

28
00:01:53,990 --> 00:01:56,210
only gets called after the thing gets rendered.

29
00:01:56,420 --> 00:02:02,330
So after the thing gets rendered we're went to console log out that entire Dohm noted that entire image

30
00:02:02,840 --> 00:02:07,300
and we are essentially reaching in the Dom to get it through that ref system.

31
00:02:07,310 --> 00:02:12,130
OK so let's make sure we save this file save your image card.

32
00:02:12,300 --> 00:02:16,490
Now flip back over and I'll do another search for cars.

33
00:02:16,840 --> 00:02:22,110
Zane you'll see that we get 10 council logs or so right here from each of the image cards inside of

34
00:02:22,110 --> 00:02:22,930
our application.

35
00:02:24,310 --> 00:02:30,340
So the ref itself is a javascript object that has a current property and the current property references

36
00:02:30,400 --> 00:02:31,090
a dom node.

37
00:02:31,090 --> 00:02:32,920
In this case the image.

38
00:02:33,190 --> 00:02:38,350
Now on this image object right here you'll notice that we have that same client height that we had before

39
00:02:38,410 --> 00:02:40,990
when we did the documentary selector.

40
00:02:40,990 --> 00:02:46,060
So if we wanted to we could very easily print out the height of each one of these individual images

41
00:02:46,090 --> 00:02:47,840
by doing something like this.

42
00:02:47,890 --> 00:02:56,060
Image Tref current dot client height like so so we could take that right there and set it on our states.

43
00:02:56,130 --> 00:03:00,020
But first let's do a quick log and just make sure that we're going down the right path.

44
00:03:01,030 --> 00:03:02,940
All right so I'm going to save that file.

45
00:03:03,040 --> 00:03:04,450
My app already reloaded.

46
00:03:04,650 --> 00:03:11,860
So I going to search for cars and lo and behold we got our results over here of zero.

47
00:03:12,220 --> 00:03:18,350
All right well everything appeared to be going along just swimmingly until this right here.

48
00:03:18,580 --> 00:03:21,340
I like seeing a high of zero right there is kind of a surprise.

49
00:03:21,340 --> 00:03:27,870
I'll tell you what let's try cons. liking out this dot image ref currents.

50
00:03:27,970 --> 00:03:30,250
And then right after it we will console log out the client.

51
00:03:30,280 --> 00:03:30,920
Right.

52
00:03:31,180 --> 00:03:31,390
OK.

53
00:03:31,390 --> 00:03:32,270
So let's try this out.

54
00:03:33,080 --> 00:03:34,080
I'll save that file.

55
00:03:34,130 --> 00:03:36,020
I'm going to enter in cars.

56
00:03:36,020 --> 00:03:37,690
Now I see a ton of stuff here.

57
00:03:37,730 --> 00:03:39,370
So I see without a doubt.

58
00:03:39,440 --> 00:03:41,240
And you know it's really hard to reference this image.

59
00:03:41,240 --> 00:03:45,800
Let's go back to just doing image reft by itself so this image that's going to make this a little bit

60
00:03:45,830 --> 00:03:47,800
easier to understand.

61
00:03:47,840 --> 00:03:49,490
So do cars again.

62
00:03:49,490 --> 00:03:49,690
All right.

63
00:03:49,700 --> 00:03:50,690
That's better.

64
00:03:50,690 --> 00:03:54,470
So now I see that I've got a height of 0 on each one of these images.

65
00:03:54,470 --> 00:04:00,170
What if I expand one of them and look at that image in particular it is telling me right here in no

66
00:04:00,170 --> 00:04:03,420
uncertain terms that has a height of 140.

67
00:04:03,620 --> 00:04:09,770
But when I counsel logged it out two seconds later or a millisecond later for that matter it said zero.

68
00:04:09,920 --> 00:04:12,130
And I definitely don't have any typos in here.

69
00:04:12,130 --> 00:04:14,240
So what is going on.

70
00:04:14,510 --> 00:04:19,960
Well it's simultaneously confusing and makes a ton of sense.

71
00:04:19,960 --> 00:04:21,370
So here's what happens.

72
00:04:21,380 --> 00:04:26,510
All right the first thing I need to understand is that in Chrome or whatever browser you are using this

73
00:04:26,510 --> 00:04:31,450
console right here this thing that we used to print out information is extremely fancy.

74
00:04:31,760 --> 00:04:38,330
When we print out that ref and we see this object right here that says Current and an image the console

75
00:04:38,330 --> 00:04:45,710
does not yet know exactly what data is inside of that image right there or that Dom node of image the

76
00:04:45,710 --> 00:04:48,050
console only knows what the height is.

77
00:04:48,050 --> 00:04:56,200
Once we expand that object and then expand current image when you click on like that arrow right then

78
00:04:56,830 --> 00:05:02,320
proem looks at that Dom node pulls a bunch of information out of it and prints it on the console right

79
00:05:02,320 --> 00:05:03,330
here for you to see.

80
00:05:03,490 --> 00:05:08,080
So in other words you are seeing when you click and expand these little dots right here you are seeing

81
00:05:08,080 --> 00:05:14,860
information at that very particular instant time like when you expand that thing from just when into

82
00:05:14,860 --> 00:05:17,680
that Dohm node and pulled out all of these different properties.

83
00:05:17,680 --> 00:05:19,990
To tell you more about that image tag.

84
00:05:20,470 --> 00:05:23,040
So does that help us understand what's going on here.

85
00:05:23,080 --> 00:05:30,940
Well maybe kind of here's what's happening when art component first renders the next seconds like the

86
00:05:31,060 --> 00:05:32,820
instant after the thing renders.

87
00:05:32,920 --> 00:05:35,680
We are printing out the height of the image.

88
00:05:35,740 --> 00:05:42,610
Now the instant after we have rendered this image the image itself has not actually loaded remember

89
00:05:42,790 --> 00:05:45,630
these image tasks that we're showing here like this image.

90
00:05:45,670 --> 00:05:52,200
This is a dom element and the DOM element is going to attempt to make a request to some outside service.

91
00:05:52,210 --> 00:05:56,680
In this case an splash to actually load up the raw image file.

92
00:05:56,680 --> 00:06:02,320
I'm not talking about the API here I'm talking about reaching out to that you are well that we are referencing

93
00:06:02,410 --> 00:06:06,640
inside of the image tag is the source like reaching out to that you are Ehle right there in downloading

94
00:06:06,640 --> 00:06:08,350
the image.

95
00:06:08,350 --> 00:06:13,870
So essentially what we're seeing here is we render Arkham phone to the screen the very next instant

96
00:06:13,930 --> 00:06:17,410
before the image has had a chance to download itself.

97
00:06:17,440 --> 00:06:20,090
We console log out the height of the image.

98
00:06:20,260 --> 00:06:22,020
At that point we haven't download the image.

99
00:06:22,020 --> 00:06:23,530
There is no image there.

100
00:06:23,710 --> 00:06:28,150
And so the image tag has a height of zero pixels.

101
00:06:28,510 --> 00:06:33,430
So the reason we see zero here for every one of these results is because we are a console log in these

102
00:06:33,610 --> 00:06:38,550
values out before we have even had a chance to load the image up.

103
00:06:38,980 --> 00:06:44,350
So then later on you come along here and you expand this object and you look at this image property.

104
00:06:44,410 --> 00:06:48,810
Well at this point yeah we've downloaded the image we've had the image just fine now.

105
00:06:49,030 --> 00:06:52,640
So now we can very easily look at the saying and reference the client height.

106
00:06:52,930 --> 00:06:55,870
So essentially it's the order of operations thing.

107
00:06:56,170 --> 00:07:01,210
If we try to access the height of the image directly from the component did mount method Well that's

108
00:07:01,210 --> 00:07:07,440
going to be way too early too early to get the height because we do not yet have the image loaded up.

109
00:07:07,540 --> 00:07:07,820
All right.

110
00:07:07,840 --> 00:07:12,110
So I'm sure that this all you know this is like yet another challenge we're adding on here.

111
00:07:12,180 --> 00:07:13,800
There is an easy workaround.

112
00:07:14,050 --> 00:07:22,320
The challenge is just understanding why we see a height of like 167 from the ref itself.

113
00:07:22,320 --> 00:07:27,140
But then 0 when we directly log out the height as long as you understand that you're in a good spot.

114
00:07:27,150 --> 00:07:27,420
All right.

115
00:07:27,420 --> 00:07:28,770
So let's take a pause right here.

116
00:07:28,830 --> 00:07:32,930
When we come back in the next section we're going to figure out how we can do a tiny tiny little every

117
00:07:32,940 --> 00:07:34,040
factor to the component.

118
00:07:34,050 --> 00:07:39,770
Did mount method and make sure that we only try to access the height after it has become available.

119
00:07:40,070 --> 00:07:40,300
OK.

120
00:07:40,320 --> 00:07:41,030
So quick pause.

121
00:07:41,060 --> 00:07:42,460
I'll see you in just a minute.