Are applications looking pretty good.
But there's one last little change.
They want to make this application.
The goal of making this change is to introduce you to one last big topic in the world of props.
So let's get to it.
All right so here's what I want to do.
I want to take each of those different comments that we just put together and wrap them in a sort of
approval card where we show the comment and then approve or reject button.
Right underneath it you might have never really seen some interface like this before but it's actually
incredibly common for blog platforms.
You see if you've ever read comments on a blog or forums or whatever it might be you might sometimes
notice that there are a lot of spam posts.
So several blog blog platforms out there will actually give blog authors the ability to approve or reject
comments before they get added to an actual blog.
And so this would suit this interface with here with suit that purpose perfectly.
We might take all the comments that people have added to a particular blog and present them to the blog
writer so that they can kind of audit them and approve them for posting or reject them before they actually
get added to the blog itself.
All right.
So we are going to do some thinking about the best way to wrap each of our comments with some additional
little card and two buttons right underneath it.
And there's definitely a very easy way to do this.
Without a doubt we could absolutely open up that comment detail component right here and add a little
bit more GSX to this thing to show that kind of outline for this card looking thing or that kind of
a rectangle around it.
And then also put two buttons underneath this as well.
Without a doubt that is an option but we're going to do things a little bit differently.
OK.
Remember the ultimate goal here is to introduce you to one last big idea in the props rolled.
So here's what we're going to do.
We're going to leave our current common detail component as it is right now.
We're not going to make a single change to it.
Instead we're going to create a brand new component a second component called approval card disapproval
card is going to show this kind of white outline around it.
And then also the approve and reject buttons and then we will have the option with the approval card
to stick some custom content in right here.
Now when we make the approval card we are not going to hardcoded to always show an instance of comment
detail.
And let me tell you why.
If we were building an application that had this type of interface right here of like a comment with
a proven reject it's entirely possible that we might want to reuse this approval card component and
just have like a white box with a proven reject buttons underneath it but have completely different
content inside of it.
Besides the comment detail as a quick example of that you know here's something we might want to build
using the approval card we might want to show the same white card show the same a proven reject buttons
but have completely different content in there.
So we're going to put the approval card together as a separate component and we want to make sure that
we can somehow show the comment detail inside of it but we don't want to always 100 percent show the
common detail every single time we use this thing.
We want to have the ability to swap out some different content in there.
All right so that's the goal.
That's what we're going to try to do.
So let's take a quick pause right here.
When we come back the next section we're going to start putting together the approval card and we'll
talk about the feature around the Propp system that we're going to use to you all to easily say about
the main content on the card itself.
So quick pause and I'll see you in just a minute.