‫Let's now build another reusable component
‫by leveraging the children prop once again.
‫And this time, let's say that we wanted
‫a component to display a message.
‫And so that message will always be this paragraph element.
‫It will also always contain this step here.
‫For example: in an H three element,
‫and then it will contain in an H three element.
‫So like this and then it will contain
‫something that we pass in.
‫So, some content such as this message right here.
‫So, let's once again, use the children prop
‫in order to create such a component.
‫So this component, I'm going to call "The Step Message."
‫So, step message.
‫And then I will for now, just copy this.
‫So, copy all of this.
‫And so as I said we want basically
‫always to display the current step,
‫and then here whatever content that we get.
‫So we need to receive two props here.
‫First is this step.
‫And then again, the children prop.
‫Which each component, remember,
‫automatically receives as soon
‫as we pass in some content between the opening
‫and the closing tag when we call.
‫So, when we use the component.
‫So, now we got the step, and then right after that step
‫let's simply display whatever children that we receive.
‫So, this part here is then that empty hole
‫that we talked about in the last lecture.
‫And this empty hole can then of course be filled
‫with whatever we pass in.
‫And again, whatever we pass in
‫between the opening and the closing tag of step message.
‫So, here in the button
‫that hole was basically all the content of the button.
‫So, the button here only displays
‫exactly what was passed in.
‫But here we will also, in addition,
‫always display this part.
‫So, the H three with the step itself.
‫Okay, and now let's...
‫Where is that?
‫Ah, yeah.
‫So, let's now replace this message right here
‫with a step message.
‫Now the step, of course,
‫we have to pass in just like any other prop.
‫Not span, step.
‫Okay.
‫And now here between the opening and closing tag
‫we basically define the children prop.
‫So this here will then become the children prop.
‫And if you get rid of all this,
‫then let's see what happens.
‫Well, nothing really happened.
‫Ah, of course.
‫I mean, we didn't really return anything here.
‫So we just wrote some JSX, but we didn't return it.
‫We also get some warning here
‫that the H three cannot be inside of a P.
‫So, let's then replace this P just with a div.
‫Give it a save.
‫And there it is.
‫Beautiful. So it always displays the current step.
‫And of course the message that we had before.
‫Because we passed that in right here,
‫into that is exactly what we had before as well.
‫And now of course, we could reuse this anywhere we wanted.
‫So let's say that here after the steps,
‫we wanted somewhere else in the app
‫also to have a step message.
‫Let's say step number one.
‫And then here, maybe the content is pass in content.
‫Let's do another paragraph with some emoji here.
‫Does not matter at all what we have here.
‫And so then here we have step one like this,
‫and we can do as many as we want.
‫So let's copy paste that.
‫Let's say for example, step two,
‫read children prop,
‫and then maybe some other emoji.
‫Give it a save.
‫And so now we have again created a reusable component here
‫that we can use anywhere in our application,
‫and give it any content that we want.
‫And it will always, as you see,
‫display this step here with the number that we gave it,
‫and then whatever content that we passed into it.
‫So into the component itself.
‫Let's come back here.
‫And here, I just thought that
‫maybe we could use our button again.
‫So, why not?
‫And then it makes even more sense to have these
‫different props because now we can
‫basically customize them in a different way.
‫So, let's say here we wanted a different background color
‫and a different text color.
‫These should be strings like this.
‫Ah, and we're missing the on click event handler.
‫And so here, let's just define an inline function.
‫And the emphasis is again, on defining a function.
‫So here we need to pass in a function, not call a function.
‫Let's just alert something here.
‫It doesn't really matter.
‫So let's say, "Learn How To,"
‫and then we can just use this here.
‫Just so that it's related to each of the steps.
‫So we opened the button, then we have the closing tag,
‫and now we can pass whatever we want in here.
‫And of course, this thing that we pass
‫can also just be regular text.
‫So give it a save.
‫And there is our button.
‫It still works.
‫So, we are successfully passing in the on click handler.
‫And then using it.
‫The styling looks a little bit off,
‫but I guess that's because I styled those one here.
‫Well, let's see, actually.
‫Just to make sure there's nothing wrong.
‫Now, in fact, these buttons get these styles
‫because they are a children of some element
‫with the buttons class.
‫Now right? But that doesn't really matter.
‫We could, of course, wrap this
‫in a div with the class of buttons that might work,
‫or maybe that will then mess up some other styling.
‫Well, that didn't really work.
‫But also because it's buttons. Yeah, nice.
‫That looks better actually.
‫And so with this, we can see that we were
‫really able to customize, once again, our button here.
‫Some parts with normal props like these three,
‫and then the content itself here with the children prop.
‫So, if we always just want to pass in a string
‫this could, of course, also be a normal prop.
‫But since sometimes we want some other content
‫like here with some actual JSX, like this span element here.
‫Well, then we should really take advantage
‫of the children prop.
‫And now to really drive this message home
‫so that you really understand how to work
‫with this important children prop.
‫Let's go back to our accordion component exercise
‫and use it there as well.