Use Props to Create Reusable Components

Based on what you know so far about props, you can think of props as what React 0:00 components use to talk to each other and share information. 0:04 Props pass data from a parent component down to a child component. 0:07 For instance, in the app component we're passing data to the header 0:12 component via the title and total Players props. 0:17 Which are then consumed by header and displayed as content. 0:21 We still need to write the props for the player and counter components. 0:27 The player component should display a player's name and 0:31 the counter component needs to display their score alongside the buttons. 0:35 Can you figure out how to do it? 0:40 Why don't you give it a try now. 0:41 Here's a hint, the player component should get two props. 0:43 One for the name and another for the score. 0:48 And player passes the counter component, a prop for the score. 0:51 Okay, how did you do? 1:01 Since player is the parent of counter, 1:03 it's going to define the props for both a player's name and score. 1:06 So in the app component, I'll pass two props to the player component. 1:13 I'll call them name and score. 1:18 I'll set name to the string, Guil, and score to the number 50. 1:21 Next, I need to allow the Player component to use these props. 1:29 I'll pass the player function. 1:35 The parameter props and replace the text in the span 1:36 with curly braces and props.name. 1:43 And that's going to render the text Guil. 1:48 Good. 1:51 So next, how do we display the score in the counter? 1:53 Well the same way we passed props to the header in player components, 1:57 just one more level deep and the componentry, let me show you. 2:02 I'll give the child counter component a prop of score. 2:06 And I'm just naming it score to be consistent with the score 2:12 prop passed to the player component. 2:15 This prop could also have any name and 2:17 it doesn't have to match the prop name at that top level. 2:19 I'll pass the score prompt down to the counter with props.score. 2:22 So now over in react devtools. 2:30 When we select the counter component inside the player component. 2:35 We see that counter has a score prop with a value of 50. 2:41 So now I'll use the prop inside counter by passing 2:45 the counter function, the parameter props and 2:49 replacing this static score with curly braces and props.score. 2:54 And now we get the score 50. 3:03 So, now that we've set up our player component to receive props and pass props 3:06 down to the counter component, we have a dynamic and reusable player component. 3:11 For example, I can use multiple player tags 3:16 inside the app component to add players and scores to the scoreboard. 3:20 Over in the browser, once I refresh, we see that we now 3:26 have four player components on screen, each with its own properties. 3:29 So this is where the concept of independent, self-contained, and 3:34 reusable components begins to manifest itself. 3:38 Components facilitate what's known as separation of concerns. 3:41 That's the idea that each component in your UI should be responsible for 3:46 one thing only, and shouldn't contain extra code that handles other things. 3:51 In other words each component addresses a specific concern. 3:56 For example, counter is just responsible for 3:59 displaying a score which you can increase and decrease. 4:02 We'll build that feature later. 4:06 Player, only displays player info like the name and score counter. 4:07 The header doesn't get reused, it only appears once. 4:13 However, extracting it to a component that's only responsible for the header 4:16 content allows our app component to be easier to read and think about. 4:20 It also reduces code complexity and improves maintainability. 4:25 Now right now we are just passing our components static values as props. 4:30 Normally this information could be coming in dynamically from a database of API 4:35 for example. 4:39 Or passed down from the main application state, 4:40 which you'll learn about in the next stage. 4:43