3.2 Parent-Child Communication
One of the most fundamental concepts in React is the way of passing data between components. The easiest form of inter-component communication is passing data from a parent to a child component. This is handled through attribute properties. Let's see how this works.
1.Introduction2 lessons, 03:04
2.Getting Started3 lessons, 15:16
3.Building React Components4 lessons, 24:57
4.Working With State6 lessons, 40:38
5.Winning and Losing3 lessons, 17:14
6.Refactoring and Final Changes3 lessons, 16:55
7.Conclusion1 lesson, 01:40
3.2 Parent-Child Communication
Now that we have our root component called Hangman in our application, ready to go, it's time to start adding the different components that make up the different pieces of this game, and getting all of these things in there. So the first thing that I wanna introduce is the concept of kinda the GameBoard, if you wanna think of it that way. Or you can really call it anything you want, but so we have our main route component Hangman. And now I wanna create the GameBoard and that board is gonna consist of bunch of different pieces. There is gonna be some information on status, there is going to be the actual kinda lettered grid that you are gonna see the letters of the word that you are trying to figure out. There is gonna be a button pad where you can push different buttons to select or guess the letters and all sorts of different things like that. But all of that information is gonna live within kind of one enclosing component that I'm gonna call the GameBoard. So let's go ahead and create that now. I'm going to, once again, create another class. And as you can see, I'm creating them all right now in index.js, but the smart thing, and we'll talk about organization a little bit later and we'll break these out into individual files and load them in. So this is your index.js file really should be fairly clean. And it's just gonna be kind of the entry point of your application where everything else is loaded in from separate files. Once again, that's an organizational issue, we'll worry about that a little bit later but right now we're just going to kind of put everything together inside of our index.js file. So let's create this GameBoard element. Once again, this is going to extend our react.component and in here let's just start once again with creating a render. Now within here, I want to do something similar to what we did before. I wanted to display some information and we're gonna talk a little bit about intercomponent communication. So how do I pass data or functionality back and forth between components and this is gonna be the first way that we talk about doing that. So what I wanna do now is I want to display some information. So let's say for now because we haven't built everything out yet, I just wanna simply display the word that we're trying to get so we're gonna call our targetWord. So let's say in here for right now I simply want to put this in as, I don't know we'll just call this an h2 for now. And within here, I want to display whatever word it is that I want my user to try to guess. So how do I do that? Well in my head at least right now, the way that I'm thinking about this is going to work is I will define within my Hangman component, what that targetWord is going to be. So I want to take that information, and I want to pass it into my GameBoard. So for now, let's just go ahead and say targetWord and I can go ahead and display that. So now I have another component I wanna use this GameBoard component and I want to display it down here within my Hangman component. So maybe I'll come in here and I will create another div down here, I'm feeling like we're gonna need that and let's go ahead and display this GameBoard. So as you can see now, I'm starting to nest components inside of each other. So right now I have my Hangman component as the parent and I have my GameBoard component as the child. Because it's living within the Hangman component. So let's go ahead and save that will pop back over to our browser and as you can see here we have our Hangman Clone. And I can see targetWord and that's kind of nice, but I wanna be able to actually pass something in there. So the way that I'm thinking about this working right now is what I want to create this GameBoard within my application. I wanna pass this targetWord from this element into my GameBoard and you can start at any level you want. You could start down here at the Hangman level And you could pass something into this and then pass it into this and you can continue to go down the chain. But the basic way that you pass information from your parent component, down to a child component is through properties or props. So the way that we can do this is you really start by defining attributes on that component's element. So in this case in GameBoard I wanna pass in a targetWord. So let's say I say my targetWord is gonna be equal to Derek. Now, by looking at this, I would just say this is just a standard HTML attribute on the GameBoard element. And technically, that's true but like I said before, because this is extending the React.component, this is like an HTML element on steroids. Just by the sheer fact that I have done this, this means that I am passing a property known as targetWord into the GameBoard component and I can get access to this whenever I want. So the way that I get access to that within that GameBoard component, is through the props class or props dictionary, that has a number of properties on it. And now the fact that I created a targetWord attribute on here means there's no at targetWord property. So let's go ahead and render that within our render function. So as I said before, this JSX kind of special and that I can do dynamic things with it. Yes, I can put static HTML out there but I can also render dynamic content using our favorites curly brackets. And if you've ever done any sort of work in Angular or anything else like that, this is not going to come as any surprise to you. That I can use these angle brackets to actually inject dynamic content in there. So I can put any sort of expressions in there that I wanted. So if I wanted to just say 2 + 2 in there, I can go ahead and save this and I pop back over to my browser and you can see that it was actually executed inside those curly brackets and I get the result here. So as you can see, I can put code inside these curly brackets and actually have it execute. But as I said before, I simply wanna render this word and the way that I pass that information down in here is through the props collection. And I can now say within here this .props I can now say targetWord. So let's go ahead and hit Save and I can pop back over to my browser and as you can see now I get Derek rendered on the page. So the first way that we have learned now to communicate from a parent component to a child, is by using attributes within that element. And then in that target element, you get a hold of those attributes via the props collection that is coming to you because you are extending the React.component class. And now you simply use that attribute name on the props collection. So now I can pass information from my parent down to my child through an attribute which is a fairly nifty trick.