Setting and Using Props

[MUSIC] 0:00 At its simplest, React is a library for creating and updating HTML elements. 0:04 Our application so far is not that useful, it consists of a static user interface. 0:10 How would we customize the scoreboard, like add new players and modify scores? 0:15 In React, we use properties, or props, 0:20 to customize our components and pass dynamic information into them. 0:22 HTML elements accept attributes that give them further meaning and 0:27 additional behavior. 0:32 Attributes provide extra bits of information to the browser 0:33 like an element's ID, class name, or an image's alt text, for example. 0:37 Every React component and 0:41 element can receive a list of attributes just like HTML elements. 0:42 In React, this list is called properties, or props. 0:47 Props are a core concept in React, because it's how we get data into a component. 0:50 Most of the components in your UI will be configured with props. 0:56 For example, you'll add functionality to a component, have it behave a certain way, 0:59 and display its contents with props. 1:04 There are two main steps to using props in a component. 1:07 First, you write props in a component's JSX tag, using an attribute syntax. 1:10 Then the component needs to be able to take in that information and 1:16 use it in some way. 1:20 If you remember earlier, when we viewed the object representation of a DOM node 1:21 in a console, it had a built-in property named props. 1:26 And its value is an object containing the attributes passed to it and its children. 1:29 Every React element and 1:35 component has a props object containing the list of props given to it. 1:36 We can inspect the props of a element and a component in React DevTools. 1:41 So if you open up React DevTools and select the scoreboard container div, 1:45 over in the right pane you'll see the text Props. 1:51 The children prop shows that it's an array holding two objects. 1:55 And the className prop is the class given to the div, scoreboard. 2:01 Inspect the Header component, and 2:07 in the right pane you'll see that Props is an Empty object. 2:09 And that's right, because our Header component currently has no props. 2:12 Let's start by displaying the content of our Header component dynamically 2:17 using props. 2:21 In the header, we need to display two pieces of content, the title and 2:22 the total player count. 2:26 You pass props to a component via the component's JSX tag 2:29 at the place where it's used. 2:33 The Header tag is used in the App component, so 2:35 let's first add an attribute named title, and 2:39 set it to the string "Scoreboard". 2:43 You can give a prop any name you want, title is just a name that I made up. 2:47 But this could be named heading, banner, Title McTitleface, anything. 2:51 Next let's add a new prop named totalPlayers. 2:56 And it's good practice to use camel case for prop names consisting of two or 3:01 more words to make them more readable. 3:05 Now, the value for totalPlayers should be a number. 3:07 Anytime you pass a prop a value other than a string, like a number or a variable, 3:11 you should place it between curly braces so 3:16 that is gets evaluated as a JSX expression. 3:18 I'll pass totalPlayers a value 1, but you can pass it any number you'd like. 3:21 As you can see, 3:26 props look like custom HTML attributes that provide information to the tag. 3:27 If you open React DevTools and select the Header component, you should see the title 3:33 and totalPlayers props we passed to the Header tag here under Props. 3:39 So these two props are now available to be used in the Header component. 3:44 Next, we'll update our Header function to use these props. 3:49 When you define a component using a function, 3:54 the function gets one default argument from React, 3:57 a props object containing a list of props given to the component. 4:01 So let's enable the use of props in our Header component 4:06 by giving our function a parameter called props. 4:09 You can name this parameter anything you want, but 4:13 props is the name most commonly used. 4:15 So I recommend naming it props as well. 4:17 If I log props to the console 4:21 You'll see that props is an object with a key of title, 4:26 which has the value "Scoreboard" and a key of totalPlayers which has the value 1. 4:30 So now we want to place the values of these props into our 4:37 JSX inside the h1 and span, replacing the static text. 4:41 We'll need to access the title and 4:46 totalPlayers properties of the props object. 4:49 And you can do this with .notation. 4:53 Just as you'd access the property of any object literal in JavaScript, for 4:54 example, props.title and props.totalPlayers. 4:59 But you can't simply write props.title between the h1 tags. 5:02 As you can see, our page will literally display PROPS.TITLE. 5:10 Well, you learned that JSX accepts JavaScript expressions. 5:15 So we'll instead display the content using a JSX expression. 5:19 Again, a JSX expression is surrounded by curly braces. 5:24 So between the h1 tags, write props.title inside curly braces. 5:28 And let's replace just the number in the span after Players with curly braces. 5:34 And inside the curly braces, we'll write props.totalPlayers. 5:42 I'll give app.js a save. 5:47 And over in the browser we see that it works. 5:49 We see SCOREBOARD and PLAYERS: 1. 5:52 And you can change the value of the title and totalPlayers props here in 5:56 the Header tag, for example, My Scoreboard and 11 totalPlayers. 6:01 And we can see that the component updates the content. 6:06 Since JSX lets us write JavaScript expressions between curly braces, 6:13 we can do things like math operations, for example, props.totalPlayers + 1. 6:19 And we get two players. 6:26 We could write literal values like strings or 6:28 numbers, and concatenate strings, even call a function. 6:31 For instance, in the Header tag, I'll pass the totalPlayers prop 6:35 an arrow function that takes a number and adds 10 to it. 6:40 Now I can call this function inside the Header component 6:47 with props.totalPlayers, pass 5 as the argument. 6:53 And as you can see, it displays the value 15. 6:59 So remember, the JavaScript you write between the curly 7:03 braces needs to be an expression or something that returns a value. 7:07 I'll set totalPlayers back to 1 for now. 7:12 In the next step, you'll learn more tips and best practices for using props. 7:19