In this section we're going to go over the solution to this extraction problem where we want to essentially
pull out this little div right here that's generating a nice looking background for both of these segments.
So I'm going to create a new component underneath our app one we can put it above.
It really doesn't matter.
It's totally up to you.
Oh go ahead and put it right underneath down here.
So I'm going to make a new component old segment like so I know that I'm probably going to have to refer
to my prop's object inside of here so I can make sure that I receive that prop's object as the first
argument to the segment component then inside of your I'm going to return a div with a class name that
contains the same class names that we are trying to extract right there.
So I'm going to give it class names of UI placeholder segment like so and then I'll close off that div
and inside the div I'm going to reference props dot children.
So this is a very simple very straightforward component right here.
It's just going to show a div with a couple of very particular class names and then show some number
of children inside of it.
Even though this might seem like a extremely basic component and it might seem like too much trouble
to even put together like I mentioned very briefly in the last video it would save you the developer
from having to memorize these class names and type them out.
You can just instead say oh yeah I want to show a segment and then reference this segment component.
So now that we've put this thing together we're going to go back over and find where ever we have that
div with the class name of UI placeholder segment.
So there's one right there.
I'm going to delete that div and replace it with a segment component and then I'll make sure that I
find the closing div delete that one as well and put a closing segment tag instead.
And now I should see the same content that I had before.
So it's definitely working out.
I can make sure that I replace this other div over here as well.
So same exact div I'll say segment and then I'll make sure that I replace the closing div right there
with a closing segment tag as well.
All right there we go.
Looks like we've got the same exact thing we had before but now we've got this nice reusable segment
component that we can reuse on future projects if we want to.
All right so this looks good.
Last thing I'm going to do is check my solution.
And there we go.
Looks like my solution was correct.
All right.
So I hope you got this solution.
Let's take a quick pause right here and we're going to start to move on to our next big topic in the
next video.