1
00:00:00,182 --> 00:00:04,083
In React, two or
more components can share the same state.

2
00:00:04,083 --> 00:00:08,903
For example,
the app component passes the players state

3
00:00:08,903 --> 00:00:13,734
down to the header and
player components through props.

4
00:00:13,734 --> 00:00:19,385
Our application currently has two
stateful components, app and counter.

5
00:00:19,385 --> 00:00:23,060
But this is not a great overall
structure for our application.

6
00:00:23,060 --> 00:00:24,758
In the React basics course,

7
00:00:24,758 --> 00:00:29,585
I just wanted to teach you how to create
a simple stateful component, a counter.

8
00:00:29,585 --> 00:00:32,595
The state of the counter
is the player's score,

9
00:00:32,595 --> 00:00:35,319
which is currently local to the component.

10
00:00:35,319 --> 00:00:39,165
This state isn't available to other
components in the app, which makes it

11
00:00:39,165 --> 00:00:43,274
difficult to access and use player scores
from other parts of our application.

12
00:00:43,274 --> 00:00:47,540
In time, we'll need to access this state
to determine the highest score and

13
00:00:47,540 --> 00:00:51,554
the total score count that will be
displayed in the header for example.

14
00:00:51,554 --> 00:00:55,312
So when two or more component
need access to the same state,

15
00:00:55,312 --> 00:00:58,105
we move the state into
their common parent.

16
00:00:58,105 --> 00:01:00,710
This is calles lifting state up.

17
00:01:00,710 --> 00:01:04,917
The score state is gonna be managed as
high up in the application as possible.

18
00:01:04,917 --> 00:01:09,517
So we'll lift the state of the counter
component up to where the player data

19
00:01:09,517 --> 00:01:11,278
lives in the app component.

20
00:01:11,278 --> 00:01:14,000
This time we'll start from the bottom up.

21
00:01:14,000 --> 00:01:16,714
Instead of keeping
the score as local state,

22
00:01:16,714 --> 00:01:20,295
we'll go back to letting it be
a prop passed to the counter.

23
00:01:20,295 --> 00:01:24,825
So in the counter class,
let's delete the state object.

24
00:01:24,825 --> 00:01:28,415
Let's also remove the button
on click events for now.

25
00:01:28,415 --> 00:01:32,517
In this video we're just focusing on
moving state to our app component and

26
00:01:32,517 --> 00:01:35,377
communicating the data
downwards through props.

27
00:01:35,377 --> 00:01:38,661
We'll handle the changing
of data in the next video.

28
00:01:38,661 --> 00:01:45,620
Let's also replace this.state.score
with this.props.score.

29
00:01:45,620 --> 00:01:49,360
So we've essentially converted
the counter back to a stateless component

30
00:01:49,360 --> 00:01:51,490
that just takes in props.

31
00:01:51,490 --> 00:01:56,705
Now in the player component,
we'll pass the score to the counter,

32
00:01:56,705 --> 00:01:59,810
with a prop name score and

33
00:01:59,810 --> 00:02:04,750
we'll set the value to props.score.

34
00:02:04,750 --> 00:02:10,097
Then in the app components render method,
let's pass the score to a player,

35
00:02:10,097 --> 00:02:14,949
also with the prop name score,
to keep the prop names consistent, and

36
00:02:14,949 --> 00:02:18,092
as the value, we'll write player.score.

37
00:02:18,092 --> 00:02:23,666
Finally, let's initialize a score
state here at the application level.

38
00:02:23,666 --> 00:02:28,601
Add a score property to each player
object and set it to zero by default.

39
00:02:34,977 --> 00:02:39,265
If we run our code, we should see that
it displays our initial player state,

40
00:02:39,265 --> 00:02:40,681
much like it always has.

41
00:02:40,681 --> 00:02:43,292
However, our dataflow is different.

42
00:02:43,292 --> 00:02:46,293
Our only stateful component is now app.

43
00:02:46,293 --> 00:02:49,331
Our counter component is now simpler and
stateless.

44
00:02:49,331 --> 00:02:51,271
Now you could leave it as a class, but

45
00:02:51,271 --> 00:02:55,402
if you'd like you can convert the counter
back to a functional component since

46
00:02:55,402 --> 00:02:58,732
it's only going to receive input
through props and render UI.

47
00:02:58,732 --> 00:03:00,538
I'll show you how to quickly convert it.

48
00:03:00,538 --> 00:03:06,290
First, I'll change the import statement
to just import react, from react, then

49
00:03:06,290 --> 00:03:12,054
replace the class definition with an error
function that takes a props parameter.

50
00:03:16,609 --> 00:03:20,938
I'll remove the render method and
keep the return statement only.

51
00:03:23,611 --> 00:03:26,740
And I'll comment out both
event handlers for now.

52
00:03:26,740 --> 00:03:30,405
We'll refactor these into one
function in the next video.

53
00:03:30,405 --> 00:03:36,850
Finally, I'll change this.props.score
to just props.score.

54
00:03:36,850 --> 00:03:40,730
Over in the scoreboard, pressing
the counter buttons no longer modifies

55
00:03:40,730 --> 00:03:44,120
the score, but this is to be expected
right now, and we'll fix that next.