In last section we put together our image card component.
We're going to use this component to render an image and then somehow dynamically give it just enough
space to show up nicely inside of our grid layout.
Let me show you a diagram that's going to explain exactly how we're going to accomplish that.
All right so put flow diagram right here.
Here's the general idea.
We're going to let each image card component render itself and its image inside of it.
After that image is rendered we're then going to somehow reach into the DOM and figure out exactly how
tall that image ended up being when it appeared on the screen.
Once we figure out that height we're going to take that height and we're going to set it on states on
each individual image card component that's going to cause each image card to render itself when it
is rendering.
We're going to use that image height that we figured out during that previous step right there to generate
the appropriate grid row and property to make sure that the image takes up just enough space to show
itself and not accidentally overlap anything underneath it.
So that's the general idea.
Now if this sounds complicated right here trust me it's not as bad as it sounds.
It's just a series of steps that you might have not gone through before.
If you've been working in front end development or maybe you have I don't know.
OK.
So the first thing that we need to do here is somehow figure out how we're going to reach into the DOM
and figure out the height of an individual image and you might know how to do that with traditional
javascript.
If we were going to do this with traditional javascript we might write out something like document queries
selector image that would give me a reference to that first image right there and then to get the actual
rendered height of it.
I would chain on a client height property code like so.
So I get back to number 321 which tells me that this first image right here needs 321 pixels of space
to render itself correctly without getting overlap from the next image down.
Now here's the thing.
This is how we do it with vanilla javascript.
But when we want to access DOM elements directly using react we do not make use of the document query
selector property or function.
Instead we make use of a reac system called the ref system ref RLF like so it's short for reference.
Let me tell you a little bit more about that system and how it works.
All right here we go.
So re-act refs react refs are a system to give you direct access to a single dom element that is rendered
by a component.
We do this in place of using code like document query selector like so in order to create a ref.
We're going to define our constructor function.
We're going to call a function inside the constructor to create a reference and assign it as a instance
variable on our class.
We can in theory assigned references to the state of our component but it's really not required to do
so because these refs are not going to change over time and we're never going to call set state with
the ref.
So no need to link it up to states in general.
We only put data in states if we expect it to change over time.
Once we assign that ref as a instance variable on our class we're then going to go down to our render
method and pass that ref into some particular GSX element as a prop.
OK.
So let's take a quick pause right here and we'll start going through this process in the next section.