Lifting State Up

In React, two or more components can share the same state. 0:00 For example, the app component passes the players state 0:04 down to the header and player components through props. 0:08 Our application currently has two stateful components, app and counter. 0:13 But this is not a great overall structure for our application. 0:19 In the React basics course, 0:23 I just wanted to teach you how to create a simple stateful component, a counter. 0:24 The state of the counter is the player's score, 0:29 which is currently local to the component. 0:32 This state isn't available to other components in the app, which makes it 0:35 difficult to access and use player scores from other parts of our application. 0:39 In time, we'll need to access this state to determine the highest score and 0:43 the total score count that will be displayed in the header for example. 0:47 So when two or more component need access to the same state, 0:51 we move the state into their common parent. 0:55 This is calles lifting state up. 0:58 The score state is gonna be managed as high up in the application as possible. 1:00 So we'll lift the state of the counter component up to where the player data 1:04 lives in the app component. 1:09 This time we'll start from the bottom up. 1:11 Instead of keeping the score as local state, 1:14 we'll go back to letting it be a prop passed to the counter. 1:16 So in the counter class, let's delete the state object. 1:20 Let's also remove the button on click events for now. 1:24 In this video we're just focusing on moving state to our app component and 1:28 communicating the data downwards through props. 1:32 We'll handle the changing of data in the next video. 1:35 Let's also replace this.state.score with this.props.score. 1:38 So we've essentially converted the counter back to a stateless component 1:45 that just takes in props. 1:49 Now in the player component, we'll pass the score to the counter, 1:51 with a prop name score and 1:56 we'll set the value to props.score. 1:59 Then in the app components render method, let's pass the score to a player, 2:04 also with the prop name score, to keep the prop names consistent, and 2:10 as the value, we'll write player.score. 2:14 Finally, let's initialize a score state here at the application level. 2:18 Add a score property to each player object and set it to zero by default. 2:23 If we run our code, we should see that it displays our initial player state, 2:34 much like it always has. 2:39 However, our dataflow is different. 2:40 Our only stateful component is now app. 2:43 Our counter component is now simpler and stateless. 2:46 Now you could leave it as a class, but 2:49 if you'd like you can convert the counter back to a functional component since 2:51 it's only going to receive input through props and render UI. 2:55 I'll show you how to quickly convert it. 2:58 First, I'll change the import statement to just import react, from react, then 3:00 replace the class definition with an error function that takes a props parameter. 3:06 I'll remove the render method and keep the return statement only. 3:16 And I'll comment out both event handlers for now. 3:23 We'll refactor these into one function in the next video. 3:26 Finally, I'll change this.props.score to just props.score. 3:30 Over in the scoreboard, pressing the counter buttons no longer modifies 3:36 the score, but this is to be expected right now, and we'll fix that next. 3:40