FREELessons: 11Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.2 Passing Props to Components

The ButtonGroup component looks nice, but it's static. To make it truly useful, we need to make our component dynamic so that we can reuse it in multiple apps. So in this lesson, you'll learn how to pass data to your components.

3.2 Passing Props to Components

In the previous lesson, we created a ButtonGroup component. And while it works, it's rather inflexible, because any time that we use this ButtonGroup, it is going to have the same three buttons, Home, Edit, and Help. So it would be nice if we could pass our own items to the ButtonGroup component, so that we could have whatever buttons that we wanted. And we are going to do that in this lesson. So the first thing we want to do is go ahead and create an array. And we're going to keep this simple, and it's just going to be an array of strings. It can be an array of anything, because you can pass anything to a component. But we will just use strings. So let's have items, or at least buttonItems. And let's have the same three items. We'll have Home, we will have Edits, and then we will have Help. And then, whenever we get everything set up, we'll create another set of buttons. And we will be able to have as many different ButtonGroups as we wanted. Okay, so we have our ButtonGroup. And now what we want to do is pass our buttonItems array to our ButtonGroup and then use those items to generate individual button components. So the first thing we need is a parameter for our ButtonGroup component. And we typically call this props. We are passing properties to our ButtonGroup. So inside of our props, we could have whatever structure that we wanted. And really, this is the API for our component. So down here, for our ButtonGroup, let's say that we want to have a property called items, so that we could pass the items to our ButtonGroup. And those items are going to be the individual buttons. So we can say ButtonGroup and then have an attribute, or a property, called items. And then we could pass in our buttonItems array. Now, the way that we do this is with a pair of curly braces. We're saying items, and then we're going to say buttonItems. And because they are inside of this set of curly braces, React is going to know that this is an actual JavaScript object that we are passing to our ButtonGroup component. So it's going to pass this as a property inside of our props. So inside of our ButtonGroup components, we will have props.items. And that maps directly to this items attribute, or property, on our ButtonGroup element. Now, I can't stress this enough. The syntax is not to use quotes here, because that's just specifying a string. We say our property name, items, =, then a pair of curly braces, and then whatever JavaScript expression that we are going to use here. In this case, it's buttonItems. This is the syntax that React needs to see in order to pass data to a component. So we have this props.items. And we essentially want to loop over these items and create a button component for them. Well, one of the easiest ways of doing that is to use the map method for our array. So we could do something like this. We could say let items=. And then we will say props.items. And then we will call them map method. And whenever you use the map method, it is going to iterate over each item within the array. And it's going to run a function on those items and then return the result of calling that function. So this function has several different parameters. The first is the actual item within the array, the item that we were working with. And since we are using Babel, we can use arrow functions. Now, the browser that you're using may natively support arrow functions. But if it doesn't, it's okay. Babel is going to compile it into regular JavaScript that will run in the browser. So for every item that we are passing to our ButtonGroup, we want to return a button component. Now, since we are using an arrow function, we can do that in two different ways. We can use curly braces here. But if we use curly braces for an arrow function, we have to actually have a return statement. If we don't have any other logic that we need to run, then we don't need any curly braces. And thus, we don't need any return statement. And instead, we could just have our button component. So we'll say button. The type is button. The className is going to be btn, and then btn-default. But then we want to use whatever string value that is inside of our items array that we are working with. And we do the same thing. We're taking the data, which is our item parameter that is inside of this function, and we are going to surround it with curly braces. Once again, this is the syntax that React needs to see in order to essentially bind the value of this variable to this component. Now, if you're not that familiar with arrow functions, we could write this like this. We could have function and then curly braces. And then this would be return. And then we would have our closing curly brace. This is essentially the same thing. It's just, with an arrow function, we have less stuff that we have to type. So I'm going to go ahead and paste that in there. Let's also add a comment that said that this is the same thing, just so that you can see that. So now that we have our items, what we want to do is get rid of these hard-coded button components. And instead, we're going to use our items. So any time that we want to directly use a value or an object within our JSX, we use a pair of curly braces and then the JavaScript expression that we want to use. So in this case, it's just simply the items variable that we created up here by calling the map method on our items property. The items came from here. Whenever we use our ButtonGroup component, we're saying items= and then our buttonItems. So let's go to the browser. Let's refresh the page. And we have the same thing. So if we wanted to have a second group of buttons, let's say this is buttonItems2. And this is Profile. And let's have just Logout, just those two things. Well, we need a top-level element here. So let's just simply add a div. We'll have our first ButtonGroup. Then we will have our second ButtonGroup and then our closing div element, or div tag, rather. And for our second ButtonGroup, we are going to pass in buttonItems2. So now we will have two ButtonGroups. We have our Home, Edit, Help. And then we have our Profile and Logout. And let's just break that. Just so that we have it on two different lines, let's actually break that twice. And then, whenever we look at it in the browser, there we see a more defined division between them. So we now have two ButtonGroups. And we could keep adding ButtonGroups as we wanted. But let's also do this. Let's create a second component, one that is going to be called ButtonGroupItem. And we're basically going to take this button component that we have and just simplify it so that we have ButtonGroupItem. We can do the same thing, where we will say that the property that we are going to bind to this component is called text. We're going to pass in item, and that's going to work. So we want a function called ButtonGroupItem. We're going to set our props. And then we are going to simply return our button element. But in this case, we don't want item here. We want props.text. And so if we go back to the browser and refresh, we are going to see the exact same thing. The only difference is that, behind the scenes, we are using two custom components. We have a ButtonGroup, which is made up of multiple ButtonGroupItems. Now, one final thing, let's look at the developer tools. And we're going to see a warning. It says that each child in an array or an iterator should have a unique key prop. So there's that term. I believe I said a couple of lessons ago that prop is one of those terms that you're going to see a lot. We don't really just say properties. We say props or a prop. So what we want to do is come here. Whenever we are creating these multiple ButtonGroupItems, we want to add another prop called key. And then this needs to be unique for each individual ButtonGroupItem that we are creating. Now, we are not going to see this whenever the component is actually rendered. Instead, this is just something used behind the scenes to keep track of each individual item. So we could use the index of each item in the array, because that is going to be unique for each individual item. So we can say key={index}. Once again, since we are referring to an actual thing in JavaScript, we are saying key= and then curly braces, the expression index, in this case, and then the closing curly brace. So whenever we go back to the browser, we refresh. Now the warning has gone away because we have a unique key for each item within our ButtonGroup. If we inspect, we're going to not see that key prop at all. It doesn't render as anything, as far as the HTML is concerned. So we did two things in this lesson. The first is, we passed data to our component so that it could be more dynamic. And that's really what we want our components to be. A component is something that we are going to reuse within our application. So we need to be able to pass data to it. And we do so by simply passing data through the attributes, or the props, of a component. The second thing we did is create another custom component. And we used it inside of our ButtonGroup component. This is essentially what we do. We create a component that is built upon another component. That is the React way.

Back to the top