1 00:00:00,470 --> 00:00:03,350 In last section we put together our image card component. 2 00:00:03,410 --> 00:00:08,720 We're going to use this component to render an image and then somehow dynamically give it just enough 3 00:00:08,720 --> 00:00:12,050 space to show up nicely inside of our grid layout. 4 00:00:12,050 --> 00:00:16,490 Let me show you a diagram that's going to explain exactly how we're going to accomplish that. 5 00:00:16,490 --> 00:00:19,260 All right so put flow diagram right here. 6 00:00:19,370 --> 00:00:20,730 Here's the general idea. 7 00:00:20,780 --> 00:00:26,390 We're going to let each image card component render itself and its image inside of it. 8 00:00:26,390 --> 00:00:32,270 After that image is rendered we're then going to somehow reach into the DOM and figure out exactly how 9 00:00:32,270 --> 00:00:35,690 tall that image ended up being when it appeared on the screen. 10 00:00:36,580 --> 00:00:40,990 Once we figure out that height we're going to take that height and we're going to set it on states on 11 00:00:41,020 --> 00:00:48,030 each individual image card component that's going to cause each image card to render itself when it 12 00:00:48,030 --> 00:00:48,890 is rendering. 13 00:00:48,960 --> 00:00:54,300 We're going to use that image height that we figured out during that previous step right there to generate 14 00:00:54,300 --> 00:01:00,480 the appropriate grid row and property to make sure that the image takes up just enough space to show 15 00:01:00,480 --> 00:01:06,120 itself and not accidentally overlap anything underneath it. 16 00:01:06,120 --> 00:01:07,700 So that's the general idea. 17 00:01:07,710 --> 00:01:11,670 Now if this sounds complicated right here trust me it's not as bad as it sounds. 18 00:01:11,700 --> 00:01:15,140 It's just a series of steps that you might have not gone through before. 19 00:01:15,180 --> 00:01:18,810 If you've been working in front end development or maybe you have I don't know. 20 00:01:19,190 --> 00:01:19,420 OK. 21 00:01:19,430 --> 00:01:23,600 So the first thing that we need to do here is somehow figure out how we're going to reach into the DOM 22 00:01:23,790 --> 00:01:28,380 and figure out the height of an individual image and you might know how to do that with traditional 23 00:01:28,410 --> 00:01:29,460 javascript. 24 00:01:29,460 --> 00:01:34,560 If we were going to do this with traditional javascript we might write out something like document queries 25 00:01:34,680 --> 00:01:41,460 selector image that would give me a reference to that first image right there and then to get the actual 26 00:01:41,520 --> 00:01:42,900 rendered height of it. 27 00:01:43,110 --> 00:01:47,360 I would chain on a client height property code like so. 28 00:01:47,370 --> 00:01:54,120 So I get back to number 321 which tells me that this first image right here needs 321 pixels of space 29 00:01:54,240 --> 00:01:58,200 to render itself correctly without getting overlap from the next image down. 30 00:02:00,190 --> 00:02:00,880 Now here's the thing. 31 00:02:00,910 --> 00:02:03,090 This is how we do it with vanilla javascript. 32 00:02:03,190 --> 00:02:10,060 But when we want to access DOM elements directly using react we do not make use of the document query 33 00:02:10,060 --> 00:02:12,240 selector property or function. 34 00:02:12,250 --> 00:02:20,640 Instead we make use of a reac system called the ref system ref RLF like so it's short for reference. 35 00:02:20,650 --> 00:02:24,250 Let me tell you a little bit more about that system and how it works. 36 00:02:24,280 --> 00:02:24,910 All right here we go. 37 00:02:24,910 --> 00:02:31,840 So re-act refs react refs are a system to give you direct access to a single dom element that is rendered 38 00:02:31,840 --> 00:02:33,140 by a component. 39 00:02:33,370 --> 00:02:40,610 We do this in place of using code like document query selector like so in order to create a ref. 40 00:02:40,610 --> 00:02:42,910 We're going to define our constructor function. 41 00:02:43,010 --> 00:02:48,260 We're going to call a function inside the constructor to create a reference and assign it as a instance 42 00:02:48,260 --> 00:02:50,410 variable on our class. 43 00:02:50,600 --> 00:02:56,390 We can in theory assigned references to the state of our component but it's really not required to do 44 00:02:56,390 --> 00:03:01,100 so because these refs are not going to change over time and we're never going to call set state with 45 00:03:01,100 --> 00:03:01,660 the ref. 46 00:03:01,820 --> 00:03:04,450 So no need to link it up to states in general. 47 00:03:04,460 --> 00:03:07,980 We only put data in states if we expect it to change over time. 48 00:03:08,990 --> 00:03:13,730 Once we assign that ref as a instance variable on our class we're then going to go down to our render 49 00:03:13,730 --> 00:03:19,220 method and pass that ref into some particular GSX element as a prop. 50 00:03:19,640 --> 00:03:20,120 OK. 51 00:03:20,240 --> 00:03:23,840 So let's take a quick pause right here and we'll start going through this process in the next section.