1
00:00:00,000 --> 00:00:04,894
[MUSIC]

2
00:00:04,894 --> 00:00:10,276
In the previous stage, we went over
react's unidirectional data flow.

3
00:00:10,276 --> 00:00:15,217
It's where data flows down the component
tree from the app's top level

4
00:00:15,217 --> 00:00:18,773
component down to the child
components via props.

5
00:00:18,773 --> 00:00:22,280
In our scoreboard app,
the player data is flowing

6
00:00:22,280 --> 00:00:26,386
down from the main app component
to the child components.

7
00:00:26,386 --> 00:00:32,031
We also had local component state in
the counter component, the scores state.

8
00:00:32,031 --> 00:00:37,392
As you may recall, component state is
state that is local to a component and

9
00:00:37,392 --> 00:00:41,744
is usually not visible or
shared outside of that component.

10
00:00:41,744 --> 00:00:47,206
Eventually, we'll create a stat component
that will display the total number

11
00:00:47,206 --> 00:00:53,094
of players, and the total score, but to do
that, it needs access to the score state.

12
00:00:53,094 --> 00:00:57,160
We lifted the score state up
to the main app component.

13
00:00:57,160 --> 00:01:01,793
So now, two or more components have
access and can share that state.

14
00:01:01,793 --> 00:01:06,008
When we lifted the score state
up to the main app component,

15
00:01:06,008 --> 00:01:09,649
we lost the functionality
of the counter buttons.

16
00:01:09,649 --> 00:01:15,980
We needed to create a way to communicate
data upstream from a child to a parent.

17
00:01:15,980 --> 00:01:20,407
We did so by writing functions and
passing them as props.

18
00:01:20,407 --> 00:01:25,841
We created an event handler in the main
app component that handles the score

19
00:01:25,841 --> 00:01:30,857
change and we pass it down to
the counter components on click events.

20
00:01:30,857 --> 00:01:35,878
Now that our score state has been lifted
up to the top of our application,

21
00:01:35,878 --> 00:01:38,859
we can pass it down to
any child component.

22
00:01:38,859 --> 00:01:41,959
In this stage,
we'll build the stat component.

23
00:01:41,959 --> 00:01:45,587
Will pass the player state,
down to the Stat component,

24
00:01:45,587 --> 00:01:49,382
and render the total number of players and
the total score.

25
00:01:49,382 --> 00:01:54,140
We'll then create a control component
called the AddPlayerForm.

26
00:01:54,140 --> 00:01:58,045
A control component is
a component that renders a form

27
00:01:58,045 --> 00:02:02,142
element whose value is
controlled by react with state.

28
00:02:02,142 --> 00:02:07,247
So the AddPlayerForm component will
render a form element with a text

29
00:02:07,247 --> 00:02:12,717
field to enter the new players name and
a submit button to submit the form.

30
00:02:12,717 --> 00:02:16,394
We'll write event handlers
to add the new player to

31
00:02:16,394 --> 00:02:20,339
the existing player state
using the spread operator.

32
00:02:20,339 --> 00:02:24,852
The spread operator allows us to
update the state without modifying

33
00:02:24,852 --> 00:02:26,288
the existing state.

34
00:02:26,288 --> 00:02:31,302
This is exciting! We're adding
new features to our scoreboard app.

35
00:02:31,302 --> 00:02:32,470
Let's get started!