1 00:00:00,300 --> 00:00:03,380 We need to improve how players are used in the app. 2 00:00:03,380 --> 00:00:08,420 We currently have four hard-coded Player components inside the App component. 3 00:00:08,420 --> 00:00:11,675 Now, if you've built a JavaScript application in the past, 4 00:00:11,675 --> 00:00:15,932 you may have looped through an array, and used the returned information to build 5 00:00:15,932 --> 00:00:18,830 strings of HTML elements that you insert into the DOM. 6 00:00:18,830 --> 00:00:22,896 Ideally in our app, we would have an array of players and 7 00:00:22,896 --> 00:00:26,976 render a Player component for each player in the array. 8 00:00:26,976 --> 00:00:28,653 In this video, we'll do just that. 9 00:00:28,653 --> 00:00:33,410 I'll teach you how to iterate over data to produce a list of elements, in this case, 10 00:00:33,410 --> 00:00:34,221 Player tags. 11 00:00:34,221 --> 00:00:37,588 First, let's define our players array. 12 00:00:37,588 --> 00:00:40,190 We'll write it at the top of app.js for now. 13 00:00:40,190 --> 00:00:44,046 Create a variable named players. 14 00:00:44,046 --> 00:00:49,095 It will be an array of objects, each object with a name and score property. 15 00:00:49,095 --> 00:00:51,062 I'll paste four objects into the array. 16 00:00:51,062 --> 00:00:54,148 And you can copy these from the teacher's notes with this video. 17 00:00:54,148 --> 00:00:57,782 So now to get this players data into our application, 18 00:00:57,782 --> 00:01:02,326 I need to pass the players array as props to the main App component. 19 00:01:02,326 --> 00:01:06,882 So down in the ReactDOM.render method, 20 00:01:06,882 --> 00:01:12,750 I'll add a prop named initialPlayers to the App tag. 21 00:01:12,750 --> 00:01:15,398 Then I'll pass it the players array, 22 00:01:15,398 --> 00:01:19,306 by writing the variable players between curly braces. 23 00:01:19,306 --> 00:01:22,855 If I bring up React Dev Tools and select the App component, 24 00:01:22,855 --> 00:01:26,768 you can see that it's now taking in an initialPlayers prop, and 25 00:01:26,768 --> 00:01:30,337 its value is an array containing the four Player objects. 26 00:01:30,337 --> 00:01:34,144 So next, to use these props inside the App function, 27 00:01:34,144 --> 00:01:37,200 we need to pass it the parameter for props. 28 00:01:39,330 --> 00:01:44,070 Now, inside the App component, we have access to props.initialPlayers. 29 00:01:44,070 --> 00:01:47,559 So what we wanna do is iterate over this array, and 30 00:01:47,559 --> 00:01:51,476 return a Player component for each object in the array. 31 00:01:51,476 --> 00:01:55,246 For this, I'm going to use the map iteration method on the array. 32 00:01:55,246 --> 00:01:56,744 If you're not sure how to use map, 33 00:01:56,744 --> 00:01:59,807 be sure to watch the Treehouse videos posted in the teacher's notes. 34 00:01:59,807 --> 00:02:03,590 You'll likely use map Map quite a bit in React to loop over data. 35 00:02:03,590 --> 00:02:07,870 Now remember, every JavaScript expression written inside JSX 36 00:02:07,870 --> 00:02:10,390 needs to be placed inside curly braces. 37 00:02:10,390 --> 00:02:14,790 So below the Players list comment, I'll add curly braces, so 38 00:02:14,790 --> 00:02:18,030 that the JSX is able to evaluate the map function. 39 00:02:18,030 --> 00:02:24,956 Then I'll begin to map over the Players array by typing props.initialPlayers.map. 40 00:02:24,956 --> 00:02:29,399 Map takes a callback function that receives and processes each item in 41 00:02:29,399 --> 00:02:33,926 the array, one by one, and returns a new array of the processed items. 42 00:02:33,926 --> 00:02:40,094 So what we wanna do is map each of our Player objects to a Player component. 43 00:02:40,094 --> 00:02:43,130 I'll write the callback as an arrow function that takes 44 00:02:43,130 --> 00:02:47,600 the parameter player to represent the current item being processed in the array. 45 00:02:47,600 --> 00:02:52,235 And the function will return a Player component, so I'll simply 46 00:02:52,235 --> 00:02:57,049 copy one of the Player components and paste it inside the callback. 47 00:02:57,049 --> 00:02:59,949 I'm using an implicit return here, 48 00:02:59,949 --> 00:03:05,384 which means that I'm omitting the return keyword and curly braces. 49 00:03:05,384 --> 00:03:09,816 Next, we'll need to adjust the props being passed to Player. 50 00:03:09,816 --> 00:03:13,540 Instead of passing static values, 51 00:03:13,540 --> 00:03:18,631 change the name prop's value to player.name, 52 00:03:18,631 --> 00:03:23,611 and the score prop's value to player.score. 53 00:03:23,611 --> 00:03:24,696 These are the name and 54 00:03:24,696 --> 00:03:28,020 score properties from each player item we're getting from map. 55 00:03:29,220 --> 00:03:33,705 Now we can delete the rest of the Player tags below the expression, 56 00:03:33,705 --> 00:03:35,158 give app.js a save. 57 00:03:35,158 --> 00:03:39,134 And over in the browser, we see the four players rendered to the screen. 58 00:03:39,134 --> 00:03:42,098 And if you have a look at the app in React Dev Tools, 59 00:03:42,098 --> 00:03:46,915 you'll see four Player components, each with a different name and score prop. 60 00:03:46,915 --> 00:03:51,766 And over in the Elements pane, you'll see React rendered 61 00:03:51,766 --> 00:03:56,033 four divs with the class player to the DOM, great. 62 00:03:56,033 --> 00:04:00,996 The header component still displays 1 as the number of total players. 63 00:04:00,996 --> 00:04:02,283 Well, this is a quick fix. 64 00:04:02,283 --> 00:04:05,730 We know that we're getting an array from props. 65 00:04:05,730 --> 00:04:09,955 So in the Header tag, if I use the length property on 66 00:04:09,955 --> 00:04:15,960 props.initialPlayers, that should return the number of Player objects in the array. 67 00:04:17,260 --> 00:04:18,920 Now it displays 4 players. 68 00:04:18,920 --> 00:04:20,360 Good, that was pretty quick and simple. 69 00:04:21,750 --> 00:04:25,715 Finally, in the console, React gives a warning. 70 00:04:25,715 --> 00:04:31,412 It says Warning, Each child in an array or iterator should have a unique key prop. 71 00:04:31,412 --> 00:04:33,962 While this doesn't prevent our app from running, 72 00:04:33,962 --> 00:04:36,106 it is something we should address and fix. 73 00:04:36,106 --> 00:04:41,065 So in the next video, we'll dive into why this warning exists and how to resolve it.