Hey guys in this lesson we're going to level up our knowledge around React components and to do that 1
we're going to learn about something called props. So head over to the starting code sandbox and go ahead 2
and fork it. And once you have it 3
feel free to download it to use in your local environment or follow along with me in code sandbox. 4
So here I've got a really simple contacts app. So I've got three people that I supposedly know their names, 5
a picture of them that I found on the Internet, some fake phone numbers and fake emails. As you can see 6
if we look inside our inde.js, this is pretty repetitive and it's also very long. And this is 7
one of the perfect use cases for React components because we have these repetitive elements that is 8
cluttering up our code making it very long and very complex unnecessarily. 9
So let's go ahead and extract each of these contacts as a brand new component. 10
I'm going to create it just inside my index.js so you can see quite easily 11
both the component and the rendering side by side. 12
And I'm going to call this component a new card like a contact card, and it's going to return 13
each of these contact items. 14
So I'm just going to cut Beyonce out of there and I'm going to insert her into a div. 15
So now this h2 image and two paragraph elements are now being returned from my card function. 16
Now I'm actually just gonna go ahead and take out these other guys from my render function and I'm gonna 17
keep my website as simple as I can 18
so you can see easily what's happening. 19
So instead of having all of those divs, I can now create maybe three cards instead 20
right? 21
So I've got three cards like so, and once it reloads you can see that yes I do have three cards which 22
all have an h2 image and two paragraphs but they're all of Beyonce. 23
So that's not what I want. 24
Instead I want to have different pieces of information in each of these reusable card components. With 25
the knowledge that we've gotten so far, 26
it's actually very difficult to make these components reusable. And it's because we haven't got any ability 27
to send these card components some custom data so that each of the cards gets rendered differently. 28
Now let's think about how this problem is solved in plain old HTML. 29
So if we had over to the index.html and let's just go ahead and delete all of our cards from here so 30
that we clear up our screen. And right below my root div where we know our React components are going 31
to be rendered, 32
I'm gonna go ahead and create just a plain HTML element. And remember that when you're creating a React 33
app you're not limited to just using React. 34
You can just insert it any way you like using a div with a particular id. And the rest of the file 35
can still be worked like a regular JavaScript or HTML file. 36
So that means if you have an existing website, it's really easy to just insert a root div and then start 37
adding React code into that particular position. 38
So I'm going to create a plain HTML element which is going to be an input element and I'm going to 39
make itself closing as well. 40
And you can see that it shows up in here as a little text box. Now this input element has attributes 41
right? Attributes which I can set with custom values. 42
For example, I could change the id of this input. 43
Let's call it fName 44
so like a field to input your first name, and then I can also give it a placeholder. 45
So I could say that enter your first name. 46
And once we refresh you can see the place holder goes up in gray. 47
And I can even set the value even before the users had a chance to interact with it. 48
So let's just say I'm going to put my own name in there and you can see that I've now got an input field 49
with a value that's already pre-existing inside. 50
And if I delete it and make it empty, then you'll get to see my placeholder text. 51
So this is kind of a way for us to pass custom pieces information via these attributes to a particular 52
HTML element 53
right? 54
And if we go ahead and take a look at this app in a separate tab and I open up my Chrome developer tools 55
then I can actually access this element by just grabbing hold of document.getElementById and we 56
call it fName. 57
So this should actually get hold of this particular input element. 58
And I'm going to save it into a variable. I'll just call it input and then hit enter. 59
So now I've got this input value stored then I can actually access all of its values. 60
I can say input.placeholder to print out the value of the placeholder attribute. 61
I can also say something like input.value to print out the current value of the inputs and I can even 62
change this right? 63
So effectively we're using these attributes from our HTML elements to use and custom pieces of data to 64
that particular element. 65
And over here when we tap into that element using get element by id and we have a reference to it, then 66
you can see it's almost like as if we have the input as an object and we're accessing each of its properties 67
like .placeholder or .value. 68
Now these attributes are predetermined and there are lists of them in the MDN docs but we can't 69
go beyond what is actually here. 70
We can't define our own custom attribute 71
right? 72
If I created something called, I don't know, just angela and I tried to give it a value. 73
And I go into my React app and I try to tap into input.angela, that doesn't actually work. But if 74
you think about your React components almost as a custom HTML element then we can define these attributes. 75
And in the React component world, those attributes are called properties and you'll usually hear them 76
referred to as props. Let's say that I decided to create a new card component from my card function. And 77
what happens behind the scenes is it's almost like I'm calling this function card and it returns a custom 78
HTML element based on my instructions. But when we take a look at these custom React components, we can 79
pass properties using very similar syntax to what you saw over here. 80
So if I go ahead and cut this input out of my index.html and I paste it down here just below my 81
card, you can see that with our card component we can do exactly the same thing. 82
So I can pass my card a value, for example name, and I can set that equal to Beyonce for example. And 83
when this card component gets created, it will have a property called name that's set to equal to Beyonce 84
And we can get hold of it by adding a name to the inputs to access those things that are sent over. 85
And it's customary to call this props. For example inside this function I can console log the value of 86
props and if I hit save and we take a look in our console, you can see that it receives an object. 87
And currently the object just has one property with a value set to Beyonce. 88
So what this means is that in fact, we can actually completely remove all of these hard coded parts of 89
our React Components and instead rely on inserting the values of these props. 90
So I could say props.name which I know to be the property that I sent over and it's equal to 91
Beyonce. 92
And now what I can do is I can for example copy the source and add that as a property. So I'll create 93
a new property called image and set it to equal the URL of that image. I will create a property called 94
tel for telephone and I'll set it equal to that number. And I'll also create a property called 95
email which I'll set equal to that made up email. 96
So now inside our card component I can access that object called props which has all of these properties 97
passed in as an object and I can tap into each of these properties as long as I know what they are called. 98
So the source was stored inside a property called img, so I can write props.img. 99
But remember that this is Javascript and we're inside an beyondelement inside our JSX file. 100
So be sure to enclose it in a set of curly braces if you want it to be interpreted as Javascript. 101
Next I've got my props. 102
tel and my props.email. 103
So I've ended up with exactly the same card as before 104
but the crucial difference is that this card no longer contains any Beyonce specific information. 105
And what I can do now is I can create as many of these cards as I need with different pieces of information. 106
And I want to pose this as a challenge to you. Go ahead and try to create another card with an imaginary 107
contact if you wish or a real contact even, and see if you can add a second card to our website. 108
That second card should appear just below Beyonce but it should have a different name, a different 109
image, email and phone number. Pause the video now and see if you can successfully reuse our custom card 110
component. 111
All right. 112
So I'm going to create another card and this is a self closing tag with no children. 113
And I'm going to add some properties. 114
And remember that because inside our card function it's looking for these properties name, image, 115
tel, email. We have to keep it consistent in between the cards. 116
So let's say that name is Jack Bauer. 117
Img is equal to some sort of image that I find online. 118
And then we've got tel which will set equal to some random numbers and email we'll set equal to 119
so perfect. 120
We've now got two cards with completely different information and we're able to reuse this card component 121
with all of its structure as well as styling if you wish. 122
So these could actually have class names associated with them or inline styling if you wish 123
but all we need to do here in our render function is to provide the customized pieces of data and everything 124
that stays the same lives inside this card component. 125
So now as you can imagine, if you wanted a contact list with many many people, you can simply just reuse 126
your card component. 127
And this brings us to a good point. 128
If you remember previously, I said that if you had a style let's say let's just give it a class name 129
let's just call it my style, and all it does is changes the text color to red and we save that CSS file 130
and we go back into our React code, 131
you can see that if I was to add that class to my div for example. 132
So I'll say className = "my-style" and I hit save and refresh my websites, 133
all the text inside that div has been changed to red right? But I can't do the same thing inside my custom 134
card component. 135
I can't for example add the class name attribute and then apply my-style. Even if I refresh a million 136
times 137
it's still not going to work. 138
And this is because inside our custom components, it sees each of these as a custom property. 139
So it thinks that you're making up a name called className and you would like to access it inside this 140
card component under the props object instead of seeing it as an HTML attribute. 141
So whenever you're using HTML predetermined attributes, they always have to go into the HTML elements which 142
are highlighted in different color and also they're in lower case. 143
So this is the reason why we can't do that. But inside our custom components, we can create any name we 144
want and associate it with any value we need. 145
So it's almost like we're calling this card function and passing over an object through the input called 146
props. 147
And then inside the function we, use those inputs to customize this HTML element and then we return 148
it and output it into our DOM to be seen on the website. In summary with HTML attributes, 149
we have the HTML tag and then we have a space and we get to use these predetermined fixed name attributes 150
such as id or place holder or value. 151
And these of course depend on the actual element that we're using. 152
And when we use these attributes, we can pass in some custom data. And that data can then be accessed 153
on the element by tapping into say the .id or .placeholder or .value properties. 154
Now when it comes to React, what we have is a very similar structure. 155
So we have our custom components and we can create as many of these properties or props as we wish, we 156
can name them anything we like. 157
They're not fixed. 158
Nobody has defined them ahead of time. 159
In fact you are the one that's creating this custom card element and you get to specify which attributes 160
or properties they should have. 161
But these values for each of these properties then gets passed along when this card component is created. 162
And when we output this HTML element we can incorporate those properties into the creation of that element. 163
And it's usually via an input called props. 164
So the easiest way to imagine it is just simply that you're creating a new Javascript object with these 165
key and value pairs and then that whole object gets sent over as the props object and then you can tap 166
into it using .name, .telephone, 167
as long as they match up with the names in your component element. In the next lesson, we're going to 168
test out your understanding of props and you're going to be using everything you learn here to complete 169
a challenge and build out a fully fledged contacts app. So for all of that and more, I'll see you there.