‫So, moving on now, it's time to learn about
‫yet another fundamental concept that we use
‫all the time in React development.
‫And that is, "The Children Prop."
‫So we have finished this project right here,
‫and so we can basically finish this with control C.
‫And so now if we reload, you immediately see
‫that the connection has been lost, or you could also
‫simply have closed this VS Code window right here.
‫Okay? And now what I want to do in this lecture
‫and the next one as I introduce you to the children prop,
‫is to use the steps component that we built before.
‫So let's go back to the steps folder
‫and open it up in VS Code.
‫And again, you can do that in any way that you wish.
‫Now, I will now actually duplicate this file.
‫So this App.js in which we are working, I will copy
‫and then paste so that we can keep the first version
‫of the code that we wrote.
‫So calling this one, app version one.
‫And so now we can continue the work here in this file.
‫All right, so let's here come to the terminal
‫and then write, NPM start,
‫so that our project opens up again here in the browser.
‫All right, yeah, remember how we had actually
‫included the steps component here twice.
‫So let's remove or comment out one of them.
‫And so yeah, it's gone.
‫And as always, it's important to keep the console open
‫and maybe also the components tree.
‫But for now, let's stay on the console.
‫Okay, so the idea of this lecture
‫is to create a reusable button that we can use
‫instead of these two ones here.
‫And I want to add an emoji to these buttons here as well.
‫So let's take a look at where they are.
‫Yeah, so these two buttons here,
‫again, I now want to create a reusable button
‫that we use instead of these two.
‫So let's do that.
‫And we start by using the knowledge that we already have.
‫So let's say, function button.
‫And then all this will do
‫is to return a button element.
‫Which would also have this style here
‫and an onClick event handler.
‫So let's just copy these two here.
‫And also let's place some text here for now.
‫And so now the idea is
‫that we can pass in the background color,
‫the color, this onClick handler here, and the text as props.
‫So basically we want to accept some props here
‫for the text color.
‫So let's actually call that, text color.
‫So text color, background color,
‫the onClick handler, and also the text.
‫And so then here, let's use that button actually.
‫So before we keep working on the button
‫let's include it here immediately.
‫Let's right away delete this one.
‫Until we use our component
‫that we are building right now.
‫So let's say text color
‫should be this one here.
‫Or actually that's the background color, of course.
‫So BG color.
‫Then the text color,
‫this one should be FFF for white.
‫And then also the onClick prop.
‫And here we want to specify the handle previous function.
‫All right, then we close.
‫And also the text.
‫So here, this one said, previous.
‫And so now let's come to our button down here
‫and let's use these values here instead
‫of the hard-coded values.
‫So here, background color should be
‫the BG prop that we received.
‫And this one should be the text color
‫that we receive as a prop.
‫Then here we want onClick.
‫And here instead of just this generic text, we want,
‫again the text that we receive as a prop.
‫So let's give it a save, maybe reload even.
‫And, you see, as we use this button
‫it still works and looks exactly the same as before.
‫So let's then do the same thing with this one here.
‫So that's just copy and pasting this one
‫and then changing the onClick handler to, handle next.
‫And here, next.
‫Let's delete this button.
‫And so now with this
‫we have exactly the same functionality as we had before,
‫but we extracted these buttons that we had here
‫into a reusable button component
‫which right now accepts the text color, the background,
‫the onClick handler, and the text.
‫So passing all this data here as props
‫into this component should be pretty clear at this point.
‫So hopefully you understood exactly how that works
‫in previous lectures.
‫But anyway, let's now say that we also want to add an emoji.
‫So that's easy enough.
‫We just accept that here as a prop.
‫So, emoji.
‫And then let's add that here before the text.
‫And let's actually create a span element for this emoji.
‫So we create a span,
‫and then in there we put our emoji and then the text.
‫Okay, and then let's actually pass that emoji in.
‫And then let's here, maybe search for finger,
‫because I want this one here, for previous,
‫and then one finger pointing in the opposite direction
‫for next.
‫So that's this one.
‫Okay, give it a save and yeah, that worked nice.
‫So we have our emojis and our text,
‫and it works exactly as we specified our button down here.
‫But now let's say that I wanted this emoji here to be
‫on this left side, but the other emoji on the right side,
‫so that it would say next
‫and then pointing right to the right side.
‫So with this we kind of have a problem
‫because we already have so many props.
‫And so do you think that we should add yet another prop
‫basically for this direction?
‫Well, maybe not.
‫Maybe it's getting a little bit too crazy here
‫with all these props.
‫And we could keep adding more and more
‫to customize this button even more.
‫But I think at this point we should not add, for example,
‫this one here, like for the direction,
‫or for the side of the emoji,
‫and instead make use of the children prop that I mentioned
‫at the beginning of the video.
‫So instead of passing in this side here, this emoji,
‫and the text, which are basically the content
‫here of this button element,
‫what if we could simply pass the content
‫right into the button as well?
‫Or in other words, what if we could pass simply some JSX
‫into the component and then the component could use that JSX
‫and simply display it?
‫Well, we can actually do that in React.
‫So let's come up here, and notice how up until this point
‫all our components have always been self-closing.
‫So we never had, like this,
‫and then any content, and then closed the element.
‫So we never had this before, but in fact,
‫we can do exactly this.
‫So just like we do with HTML elements
‫where we have an opening tag,
‫then some content, and then a closing tag,
‫we can do exactly the same with React components.
‫So here, of course, I don't want that gibberish,
‫let's just put it back for now.
‫But basically what we want is to now here
‫write that span with the emoji.
‫So this one, and then, previous.
‫So this is exactly what we want
‫as the content of this button.
‫And if we were writing the button as a simple HTML button
‫this is what we would write.
‫So that's actually exactly what we did right down here
‫inside this button.
‫And so again,
‫we can do exactly the same thing with our React components.
‫So then we no longer need this, and this,
‫and let's then do the same thing here.
‫And so now comes that part
‫where we can very easily change the direction
‫or the side of the emoji, because we can simply write, next.
‫And then we put our emoji in the JSX on the right side.
‫So easy, right?
‫Well, I forgot to close our button here.
‫Okay. And now of course you don't see
‫any content here anymore,
‫because we no longer are passing in the text and the emoji.
‫And so now it's time to fix this.
‫So basically now it is time to give the button element
‫access to whatever content we wrote
‫into the opening tag and the closing tag.
‫And so that's where, finally,
‫the children prop comes into play.
‫So, the children prop is a prop that each React component
‫automatically receives.
‫And the value of the children prop is exactly
‫what is between the opening
‫and the closing tag of the component.
‫So let's remove all of this,
‫and then we simply need to write, children.
‫And so this really is a predefined keyword inside React.
‫And so as a final step, we can remove all of this
‫and simply use the children here.
‫Give it a save.
‫And there we go.
‫Beautiful.
‫So we have exactly what we set out to build.
‫We have the emoji here on the left side,
‫and here on the right side.
‫And of course we could do anything here.
‫So we could have even more emojis, even more elements.
‫And yeah, we could do really whatever we wanted.
‫Because, this content here of this element
‫would simply be passed as the children prop into the button.
‫And then here we use that children prop
‫and display all that content right here
‫inside this HTML button.
‫And with this, we just gained a brand new
‫and really, really important tool
‫that is used all the time in React.
‫It's actually one of its most useful features, I would say.
‫And the reason for that
‫is that it allows us to make our components truly reusable.
‫So with this children prop, I am now able to pass
‫whatever content I want into this button element.
‫And the button component doesn't even need to know
‫what content this is going to be.
‫All it does is to take the children,
‫so all the content and all the JSX that we just passed in,
‫and will simply then render it inside this button component.
‫And so because of that, we can think of the children prop
‫as a hole that can be filled by us passing in the content
‫into that component.
‫And if for some reason this seems strange, and don't worry,
‫we will use this children prop all the time,
‫all the way until the end of the course.
‫And now just to finish,
‫let's quickly recap what we just did here.
‫So, by using the children prop in the button component,
‫we basically left an empty hole
‫right in the component that we could then fill
‫with any JSX markup that the component receives as children.
‫But then the question is, how do we pass in these children?
‫Well, when we include the button component in some JSX,
‫instead of immediately closing the element,
‫we can write some more JSX into that element.
‫So just like we can write any HTML markup
‫inside other HTML elements, right?
‫So just like an HTML,
‫we can write anything that we want between the opening
‫and the closing tag of the component that we are using.
‫So, in this example, this piece of JSX creates the elements
‫that are then the children of the button component,
‫and they will then be accessible inside that button
‫as props.children.
‫So that's why we say it is the children prop.
‫So, basically, by defining child elements like this,
‫we are passing them into the button
‫just like we can pass in any other prop.
‫The difference is in the way
‫in which we specify other props.
‫So, the more regular props, and this one.
‫So by passing in content
‫between the opening and the closing tag of an element
‫we basically fill the hole that we left
‫in the component by using props.children
‫in the JSX of that button, so of that button component.
‫So, if we think about this,
‫the children prop is really an ideal way
‫of making reusable and configurable components.
‫Especially when it comes to the content of the component.
‫So for example, let's say that we wanted to create
‫a second, similar button,
‫but with some other emojis and text.
‫Well, now that we know about the children prop,
‫that is really easy.
‫All we have to do is to pass in some different JSX
‫and then the button gets completely different content.
‫And this technique is really, really useful
‫for building generic components that do not know
‫about their content before actually being used.
‫Like, for example, a model window, a generic slider,
‫or simply a generic button like the one that we just built.
‫So, again, this button component had absolutely no idea
‫about the content that it was receiving,
‫and therefore about the content that it was displaying.
‫And so this is really amazing
‫to create generic and reusable components.
‫So using the children prop like this
‫is really an extremely powerful technique
‫that you will need to master as you learn React.
‫But we will use this over and over again.
‫And so there will be plenty of time to practice,
‫and actually starting right in the next video.