We're going to spend a little bit of time trying to figure out why we are seeing this really weird behavior
whenever we click on plus Texel or plus code down here at the very bottom, if I click on plus text,
the one that I'm moused over or hovering over kind of fades out for a month, then fades back in and
I see another ad cell at the bottom suddenly fade out.
So again, just a little bit weird behavior and I want to figure out why this is occurring.
But to understand this problem, first, we're going to go and get a quick reminder on some of the logic
that we wrote out inside of our cell list component.
OK, so back inside my editor, I'm inside of Cell List.
And you will recall that inside of here, we put together rendered cells.
So this is where we render over or iterate over all of our different cells, we produce a fragment for
each one.
That fragment has a key property assigned to it.
And then we show and add cell and cell list item.
We also show a cell at the very bottom as well.
That one does not get a key property because it is not being created inside of a list or really inside
of an array.
Now that we got that reminder, let's go take a quick look at a diagram.
OK, so this diagram is just a little bit weird, let me just explain it very quickly.
In the very center is what we see in the UI.
So we've got our ad cell component and then possibly a tech cell and another ad cell at the very bottom.
Let's imagine for a second that we've got one cell inside of our Redock store and that it has an idea
of AAA.
So here's the cell for that cell.
And we've applied a key to the react fragment rapping, ad sell and sell that key is a.
Then on the right hand side, of course, we've got a reduc store inside, there is order and right
now the only cell we have is the cell with AAA.
Now, let's imagine what happens whenever we mouseover the very bottom out cell right here and click
on less text or plus code.
The first thing we're going to do is generate a brand new cell.
We're going to randomly generate an ID, add it into our order array and add the cell itself into our
data object.
But right now, we'll just worry about the order array.
I'm going to imagine that this new cell has an ID of BBB.
So as soon as we update our state inside of redux, we're going to communicate over to the side of application
that some data just change and we need to render all of our different components that's going to cause
cell list to render.
That means we're going to take all the different cells that we now have in this order and render out
a list using them.
When we do so, we can then imagine.
That we create a new block just like this and stick it right there.
It will have a key of BB and an ID.
Of BBB.
Now, the really key thing I want you to understand here is that when we add in this new element right
here, we are really inserting it directly into the dam.
So we are inserting a brand new set of HTML elements that include everything for the ADD cell component
and the textile component.
Everything below that point gets essentially shifted down in the dome, so the very bottom ads sell
this one right here that does not have a key.
It gets shifted down, but it's still the same elements.
It's the same each HTML elements that exist inside the dome.
We are just moving them down the screen a little bit to accommodate this new item that we are inserting.
This kind of explains the weird behavior that we are seeing when you and I inside the browser look on
plus text, we see something fadeout down there at the very bottom.
This right here, the one that is now being displayed, the ad says at the very bottom is the same one
that we're clicking on right here.
When I click on plus text right here, this element, this entire component is being moved down the
screen.
And because my cursor is no longer over it, we apply and opacity of zero back to it because we're no
longer hovering.
So it's going to very gently fade out over that span of about point three seconds.
At the same time, we are inserting a brand new ad sell right here as well, and because now as we instantly
inserted my cursor is right over that element, we are hovering over it, which means we are going to
adjust its opacity to one point.
Oh, so all this stuff just completely explains the behavior that we're seeing here.
It's all just kind of working, believe it or not, exactly as we could or really should be expecting.
It's just because of how we've set up all these different elements, how they're being moved around
the screen and this entire hover opacity rule that we end up with this kind of weird looking behavior.
But again, at the end of the day, this is really what we asked for.
Like I said, I want to now we kind of understand what's going on here.
I want to spend just a little bit of time to take a look at a couple of different solutions we can use
to fix this up.
So let's start taking a look at these different solutions in the next video.