Let's take a look at a couple of different possible ways of solving this problem.
The first solution we could try to use is a pure solution.
Back inside, my editor.
I'm going to find my ad cell sites file.
And then right after ad sell, I'm going to add in a new selecter of ad sell.
Ohlin Active.
Inside there, I'm going to put in and opacity of zero important in a transition of opacity, zero.
S.
So let's just go test this out really quickly and we'll describe exactly and figure out exactly what's
going on with this.
All right, so back inside my browser now, if I click on plus text right here, you'll notice I no
longer have that kind of fade out effect where the ad cell bar that is being presumably moved down towards
the very bottom so I can click.
Don't see anything down there.
Of course, the one I'm clicking on still fades out, not great, but it's definitely slightly better
than what we had before.
And I guess you could possibly even say that having this ad cell played out for just a moment is almost
kind of desirable because it kind of indicates that, hey, something is changing inside of application.
So not the worst solution.
But again, doesn't really fully solve the entire issue here.
So let's very quickly understand how this rule right here is really working.
The active pseudo class selector is applied to any element that the user is actively interacting with
generally through a click.
So by adding on ad cell active, we're seeing that whenever a user is really clicking actively clicking
on ad cell, we are going to temporarily apply opacity of zero.
And we're going to also update the transition property as well to make sure that the change in opacity
occurs instantaneously.
So I want to instantaneously apply in opacity of zero, and I want to make sure I apply the important
important selector on here as well for the important modifier to make sure that we override any existing
other opacity rules.
The one downside to this is that if I click down and hold, that applies the active selector.
So even though I have not released my mouse right now, I've not released my clicking button.
The active duty selector is being applied.
So this thing fades out for just a moment entirely when user first clicks before they even let go of
their mouse.
It's only when I let go of that button, which I just did, that now we are not applying active anymore.
So we register that click event and that element is being moved down to the bottom, the one that was
actually actively clicking on.
So again, this kind of solves the issue, but there's definitely some big downsides to it.
Let's take a look at some other possible solutions.
I'm going to undo that success and then going to go back over to my cell list file.
So the next solution I'm going to show you is definitely a goofy one, don't really recommend it, but
is slightly better or kind of presents a slightly better result to our users.
So I'm going to show it to you regardless, because it's just kind of an interesting solution.
But again, maybe not the best one in the world.
OK, so like we just saw back in that diagram a moment ago, one of the issues around this entire problem
is the fact that we are rendering a list of cells right here inside of an array.
And inside that array, we've got this fragments and each fragment has a key.
These keys are what allow react to positively identify exactly what every element is inside the dome.
Whenever we make an update to our list, if we tried to render the list again and some element inside
there has the same key react is going to go and update that same element in the dome, as opposed to
creating an entirely new fragment with a new ad cell and a new cell list item inside of it.
So we can kind of abuse this just a little bit to our advantage.
Let me show you how.
Underneath rendered cells, I'm going to do a rendered cells push and I'm going to add in.
To the very bottom of that array, the ad cell that is supposed to be displayed at the very bottom,
they're going to cut that thing and push it in like so.
Then here's the really weird part, the part that I don't really recommend.
I just want to show it to you for a little bit of fun.
I'm going to put on a key property here of Map Dot Random.
So as you'd guess, this means that every single time we render our sell list component, we're going
to have a completely different key being applied to this component because we are applying a totally
different key react is going to say, oh, there's already an ad selling the -- well.
It has a different key, so it must not be really the same component.
So it's going to throw away the ad sell currently in the dumb and completely recreate it.
So by doing this, we are not really pushing down the ad sell component, which is what is happening
right now.
Instead, we are throwing out the current ad sell that we're clicking on and then rendering a brand
new one.
And because we are rendering a brand new one, there is going to not be any starting opacity of one
point zero.
Instead is going to have an initial opacity of zero.
So let's try saving this.
Going back over.
And now if I click on Plus text, let's do a quick refresh first.
Delete the two code cells just to make it a little bit more clear.
So now when I click on Plus text, I still get the fade out of the element I'm clicking on and the fade
back in.
But we don't see that fade out for the one at the bottom.
And that is because this ad cell down here is being completely recreated.
There is no active hover rule on it.
We're not actively hovering on it.
We're not moving it down.
We're throwing away the one that we're clicking on.
So this one right here, if I click on it, we're throwing this one away, creating a brand new one
and adding the new one at the very bottom.
So this definitely works, but there is a big downside to it, this is only going to work correctly
for the very last element, the very last ad sell.
We haven't really discussed it, but this is a problem that occurs for all other ad sales we have as
well.
So if I click on, say, plus text right here.
Yeah, same problem still applies.
I'm moving down that ad sell to right there and inserting a new ad sell in a new Texel.
Regardless, I just thought you might find the solution kind of funny, kind of interesting, because
it really illustrates what's going on with this key prop.
OK, so I'm going to undo that.
And return ADL back to our return, Bluck, there we go.
OK, so now final last solution we're going to take a look at, and this is one we're going to actually
implement now, the solution is going to be painful, without a doubt.
It is the most challenging solution for us to implement.
But the reason we're doing it this way, the reason that we've written out this entire project in the
fashion that we have and the reason we're going to go with this solution is because, well, this is
a course and it is a great place for you to see really big mistakes, recognize the mistake, understand
why the mistake has occurred.
And then have you and I be able to refactor together and fix up our code base to accommodate for this?
So in other words, we could have solved this much earlier in the course by writing our app in a slightly
different fashion.
And this problem would have never came up.
But I figured, hey, let's just do things the wrong way, because it seems like kind of a really obvious
way to do things.
But it's just going to give you a little bit of a sense of, hey, maybe we really need to do we really
need to think through some of our very benign decisions when we start putting together the initial design
of rap.
OK, enough of me grandstanding, though.
Let's take a look at what we're going to do.
OK, so right now we've got a system that's kind of like this, we are saying that we've got a Texel
or a code cell, whatever, and right above it we are showing the ad cell component and we are applying
a key to that entire block right there.
The reason that we have set everything up like this is because we have an action creator called insert
cell before.
So if I click on plus text right here, that means I want to insert a cell before this cell.
That entire paradigm totally makes sense, even for the last abseiled down here, if I click on less
text right there, I'm saying insert cell before null, which remember, we kind of interpreted as meaning
added at a new cell down to the very bottom.
So here's how we're going to do to solve this.
We're going to invert that entire paradigm instead of having an action creator called insert cell before
we're going to instead do insert cell after.
The net effect of this is that we're also going to make sure that whenever we render out one of these
list items, rather than showing a action bars ad sell on top of the Texel, we're going to flip that
as well.
So we're going to say that the very first ad cell in our list is going to be the one without a key or
something, the one without any ID or any companion cell.
And for every other cell we have, we're going to first show the cell and then the ad cell component.
Let's think about what happens if we click on, say, plus text for the bottom one right here and we
are in this kind of world of insert cell after.
If I click on this thing right here and I try to insert a cell after this point, that means that I'm
going to create a brand new cell and show it down here.
This new one will have a brand new key.
So maybe something like.
But the element that I had originally clicked on, the one right here, it stays right there, I'm not
shifting anything down the dumb.
Instead, I'm adding in a new element below what I'm currently hovering over.
So because I'm not shifting this thing down the dam, it's not going to fade out, it's not going to
fade out down here, the new one that is inserted right here isn't going to suddenly fade in.
We completely sidestep this entire issue.
This also will work directly for the very first element up here, the one that does not have a key to
the one where we would presumably call insert cell after with null.
So if I click on plus text right there, again, I'm not shifting this element around on the screen
and said instead I'm going to add in a brand new one right after it.
So because I'm not shifting this thing, nothing is going to fade out.
Nothing's going to fade in.
We completely solve this issue.
So that's pretty much it, that's how we're going to solve this problem instead of doing an insert cell
before we're going to do an insert cell after.
When we originally we're talking about these different action creators, this seemed like a really benign
decision.
It seemed like, hey, do we want to insert a cell before or after and doesn't make a difference?
Who cares?
Well, here's a great example of yes, it does, in fact, make a difference.
So the takeaway here is that whenever we are adding elements into a list, we want to have these kind
of like things in between that we can use to add in new records.
Generally using a pattern of inserting after that point is the way to go as opposed to insert before,
because if you do an insert before, you're going to very quickly start to run into these really weird
issues, not only around success, but there might be some other issues that we're just not quite seeing
right here right away.
OK, so again, I apologize for not just doing the right thing earlier when we were originally putting
together all of our reduc stuff, but I just really want you to see this whole problem, understand
why it came up, see the entire thing.
And I wanted to go through the refactored together and understand how we could fix all this stuff up.
So let's take a pause right here.
We're going to start to refactor that action creator in the next video.