The ADL component is looking pretty good, and now we need to show it on the screen, we've really got
two options here.
We can either show ADL inside of our cell list item component or alternatively, we could show it inside
of cell list to member cell list is iterating over all of our different cells and displaying one copy
of cell list item list items responsible for showing one individual cell.
Now, you might initially think that we should show add cell inside of cell list item because we kind
of have a one to one pairing almost.
By that, I mean to say that we've got one add cell component for every cell that we're trying to display,
they're showing inside of cell list item.
Yeah, it might make sense, but the one thing that kind of points us to adding the add cell component
to cell list instead is the fact that we have to show this extra last one down here at the very bottom.
Adding this in cannot really be done effectively inside of our cell list item component because list
item is always going to try to show exactly one of these add cells for every cell.
We do not want to have just one add cell for every cell.
Instead, we want to have equal to the number of cells plus one, this additional one at the very bottom.
Showing this last additional one is going to be a lot easier to do if we take care of all this ad sell
stuff inside of our sell list component.
So let's go over to Celeste.
At the very top, we're going to import and sell.
From ADL.
I'll then find where we map over our list of cells right here.
I'm going to wrap so list item in a fragment.
And then right above Celeste item, I will display ad sell, this, of course, needs a prop of next
slide, so I'll make sure I provide that.
And the next slide is going to be this sells ID, it will just put in sell ID like so.
We can then also take care of showing an ad absolute instance at the very end of our list as well by
just directly inserting it after our rendered cells.
So I'm going to expand that div.
And after rendered cells, I will add in add cell and then in this case, our next cell ID is going
to be null.
It looks like we might have messed up or I should say I messed up the crop type definition or next slide
because I'm getting an error here around providing a value of.
So let's go back over to add cell very quickly and just make sure we clarify and say that we should
be allowed to provide a next slide of null.
OK, so here's Asselborn.
Yep, sure enough, I put in string just a really big string or no.
Now, as soon as I have that, I get another air coming from insert cell before, so it looks like I
also made a mistake over there as well, or the action creator itself.
It looks like I'm expecting to always receive a I.D. that is a string.
And again, that should really be either a string or null.
Let's go fix up that action creator as well.
Inside of my state directory, I'll find action Krieger's index dots.
I'm going to find our insert sell action creator here it is right here and again, rather than saying
this is always going to be a string, should be string or null.
Again, little mistake on my part.
OK, so I'm going to save all these changes, I don't see any more typescript errors, I'll then go
back over to my browser to a quick refresh and now I should see our ad cell components.
I see one at the very top before a cell.
I see additional ad cell components between all other cells.
And then I should also see an ad cell down there at the very bottom as well.
Looks like I might have a ER as well.
Some.
Let me just open up my console, take a look at what that is.
Oh, completely forgot to add on that Kiprop will take care of that in just a moment.
Totally fine.
Really quickly, let's try to add in some additional cells, I'm going to first try to add in a tech
cell.
Hey, it looks like that works.
I can also try to add in a code cell at the very start.
It looks like that works as well.
I should also be able to go down to the very bottom of our list, add in a code cell at the very bottom,
add in a tech cell at the very bottom.
Yeah, I'd say this is working out pretty well.
Well, of course, we definitely need to work on our styling just a little bit and we need to resolve
this morning, but I'd say overall this is going pretty well.
Let's take a pause right here and continue working on ad sell in just a moment.