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.