1 00:00:00,260 --> 00:00:01,420 In the previous video, 2 00:00:01,420 --> 00:00:04,910 we wrapped the children of app, in the Provider component. 3 00:00:04,910 --> 00:00:07,870 The Provider usually lives at the top level of your app. 4 00:00:07,870 --> 00:00:10,330 And it's what's going to provide the actual data 5 00:00:10,330 --> 00:00:13,410 that needs to be shared throughout the component tree. 6 00:00:13,410 --> 00:00:17,740 The provider component requires a value prop to share data. 7 00:00:17,740 --> 00:00:21,290 The value can be anything, but it's usually the application state and 8 00:00:21,290 --> 00:00:24,540 any actions or event handlers shared between components. 9 00:00:24,540 --> 00:00:29,995 Let's first pass the value prop our player state, with this.state.players. 10 00:00:29,995 --> 00:00:34,863 In React Dev tools, notice how Context.Provider now holds 11 00:00:34,863 --> 00:00:39,050 the players array and state and its value prop. 12 00:00:39,050 --> 00:00:43,667 So any component that's a descendant of the provider will have access to 13 00:00:43,667 --> 00:00:45,795 the data given to the value prop. 14 00:00:45,795 --> 00:00:48,880 And the way you access that data is with a consumer. 15 00:00:48,880 --> 00:00:53,290 The Provider provides the context and a consumer consumes and 16 00:00:53,290 --> 00:00:55,530 subscribes to that context. 17 00:00:55,530 --> 00:00:58,510 A single provider can be connected to many consumers, 18 00:00:58,510 --> 00:01:01,180 no matter how far down they are on the component tree. 19 00:01:01,180 --> 00:01:05,090 So let's start by adding context to the Stats component. 20 00:01:05,090 --> 00:01:10,785 In Stats.js, we'll import the consumer using a named 21 00:01:10,785 --> 00:01:15,765 import with import consumer from ./context. 22 00:01:17,445 --> 00:01:19,935 Then in the function's return statement, 23 00:01:19,935 --> 00:01:24,526 we'll use the Consumer component by adding opening and closing Consumer tags. 24 00:01:26,250 --> 00:01:28,641 To render anything inside the consumer, 25 00:01:28,641 --> 00:01:31,810 you use a pattern in React called a Render Prop. 26 00:01:31,810 --> 00:01:33,530 Render Prop refers to a method for 27 00:01:33,530 --> 00:01:38,370 sharing code between React components using a prop whose value is a function. 28 00:01:38,370 --> 00:01:43,460 A component is provided a prop which takes a function that returns a React element. 29 00:01:43,460 --> 00:01:46,720 You can learn a whole lot more about Render Props in the resources listed in 30 00:01:46,720 --> 00:01:47,850 the teacher notes. 31 00:01:47,850 --> 00:01:50,869 This pattern is also called function as a child. 32 00:01:50,869 --> 00:01:54,431 Because instead of passing a prop, you're also able to write a function inside 33 00:01:54,431 --> 00:01:56,580 the opening and closing Consumer tags. 34 00:01:56,580 --> 00:01:59,660 The function returns the part of the UI you want to render. 35 00:01:59,660 --> 00:02:04,850 So we'll use a function that returns the stats UI inside the Consumer. 36 00:02:04,850 --> 00:02:09,250 This function is required and needs to be placed inside a JSX expression. 37 00:02:09,250 --> 00:02:12,610 So let's add a set of curly braces inside the Consumer tags, 38 00:02:12,610 --> 00:02:16,550 then the function that will render something based on the context. 39 00:02:16,550 --> 00:02:22,570 The function takes the current context value as a parameter, and returns JSX. 40 00:02:22,570 --> 00:02:27,367 This parameter is commonly named value or context, I'll name it context. 41 00:02:28,433 --> 00:02:32,986 The context parameter passed to the function will be equal to the value prop 42 00:02:32,986 --> 00:02:34,420 of the provider. 43 00:02:34,420 --> 00:02:38,440 In other words, the data we pass into the provider's value prop 44 00:02:38,440 --> 00:02:42,260 is made available here via the context parameter. 45 00:02:42,260 --> 00:02:46,470 So the consumer is now subscribed to any context changes. 46 00:02:46,470 --> 00:02:51,590 Now we're able to access the player's data directly from within the stats component. 47 00:02:51,590 --> 00:02:56,588 In the body of the function, I'll add the return keyword in a set of parentheses 48 00:02:56,588 --> 00:03:01,598 to wrap the JSX, then move the entire stats table inside the return statement. 49 00:03:05,601 --> 00:03:10,317 Next, we need to move the total players and total points variables inside 50 00:03:10,317 --> 00:03:14,750 the consumer, just above the child function's return statement. 51 00:03:14,750 --> 00:03:16,781 That way, we can access context. 52 00:03:20,444 --> 00:03:26,893 Then, replace props.players.length with context.length and 53 00:03:26,893 --> 00:03:31,790 props.players.reduce with context.reduce. 54 00:03:31,790 --> 00:03:36,120 And since we're no longer passing the player state to the Stats 55 00:03:36,120 --> 00:03:40,055 component as props, we can delete the props parameter. 56 00:03:40,055 --> 00:03:44,322 As well as the entire propTypes object below the function and 57 00:03:44,322 --> 00:03:47,174 the PropTypes import statement up top. 58 00:03:48,979 --> 00:03:54,425 In Header.js, we can delete the players prop passed to the Stats component, 59 00:03:54,425 --> 00:03:57,290 because it no longer needs it. 60 00:03:57,290 --> 00:04:02,658 And remove the object and players variable in the Header function's parameters, 61 00:04:02,658 --> 00:04:07,805 as well as the propTypes object below the function, and the PropTypes import. 62 00:04:09,882 --> 00:04:15,500 Over in app.js, the player state no longer needs to make it's way through the Header. 63 00:04:15,500 --> 00:04:18,900 So we can also remove the player's prop past to the Header component. 64 00:04:20,439 --> 00:04:25,250 Our Header component now looks much cleaner and has less responsibilities. 65 00:04:25,250 --> 00:04:30,290 It's just a stateless component that renders the Stats title and Stopwatch. 66 00:04:30,290 --> 00:04:35,034 The Stats component displays all the scoreboard stats just like before. 67 00:04:35,034 --> 00:04:36,567 But instead of props, 68 00:04:36,567 --> 00:04:41,890 it's getting the player's data from the provider via the consumer. 69 00:04:41,890 --> 00:04:45,060 So any time there's a change in the player's state, 70 00:04:45,060 --> 00:04:50,380 the consumer get the data it needs to update the UI from the provider. 71 00:04:50,380 --> 00:04:54,550 All right, now that you've learned how to use a consumer and access context 72 00:04:54,550 --> 00:05:00,080 set by the provider, why don't you use a consumer inside the player list component. 73 00:05:00,080 --> 00:05:04,313 The consumer here needs to access the player state just like we did with 74 00:05:04,313 --> 00:05:05,686 the stats component. 75 00:05:05,686 --> 00:05:10,650 And it should provide that data to the map function returning each player and state. 76 00:05:10,650 --> 00:05:13,150 I'll show you my solution in the next video. 77 00:05:13,150 --> 00:05:16,240 You may have noticed something you haven't seen yet in React. 78 00:05:16,240 --> 00:05:19,702 The React.Fragment tags inside the return statement. 79 00:05:19,702 --> 00:05:23,433 A React.Fragment lets you group a list of sibling elements or 80 00:05:23,433 --> 00:05:27,464 components without having to add an unnecessary reaper element. 81 00:05:27,464 --> 00:05:29,710 It doesn't render anything out to the DOM so 82 00:05:29,710 --> 00:05:33,494 I'm just using it here to contain the list of player components. 83 00:05:33,494 --> 00:05:36,394 You can read more about React.Fragment in the teachers notes.