Creating the Application State4:34 with Guil Hernandez
Now you're going to learn how to remove items from state. We'll initialize a
players state in the
App component, then create and wire up an event handler that removes a player
onClick. You'll bring together a lot of what you've learned to create a feature that removes players from the scoreboard.
In these final videos, you'll bring together a lot of what you've learned 0:00 to create a feature that removes players from the app. 0:04 When a user clicks the close icon next to a name, 0:07 that player gets deleted from the scoreboard. 0:10 You learned that the only thing that can change over time and react is state. 0:13 A change in state like increasing the score state by 1, 0:16 results in changes to the UI. 0:20 And when changes are made to the UI like removing a player from the scoreboard, 0:22 your data also changes in response. 0:26 So now you're going to learn how to remove items from state. 0:29 We'll initialize a player state in the app component, then create and 0:33 wire up an event handler that removes a player on click. 0:37 Since the app component is responsible for rendering the player component, 0:41 It's going to own and maintain the player state. 0:46 That state will then be passed down and 0:49 available to the player component as well as all children of App via props. 0:52 First we'll make App a stateful component, 0:58 by converting it from a function to a class, 1:02 with class App extends React.Component. 1:07 Inside the class, Let's add a render method, 1:11 then place the return statement inside the render method. 1:16 Remember state is an object that stores all the data that the component itself 1:25 needs and data that might get passed down to its children. 1:30 So in the App component, let's initialize a player state using a class property. 1:34 First, set state equal to an object. 1:40 Inside the object, add a property named players and set it to an array. 1:45 Next, I'll cut all the objects out of the original 1:53 players array at the top of the file. 1:57 And paste them inside our new players array and state. 2:00 This data is going to be our initial state. 2:07 Now, we just need the name and ID properties right now 2:10 since the score state is being set and updated in the counter component. 2:14 So, I'll go ahead and remove the score property from each object 2:19 And, now we can go up and delete the original players array. 2:28 And we no longer need to pass the player data to 2:33 the App component as props because the data is now in state. 2:36 So let's also delete the initial players prop given to the App component in 2:40 ReactDOM.render. 2:44 Next in the App components render method, 2:47 we need to change our map function to iterate through the players array and 2:51 state, which we can access with this.state. 2:56 So let's replace props.initialPlayers 3:00 with this.state.players. 3:06 And we'll also need to change the total players prop in 3:10 the header to this.state.players.length. 3:15 Over in React Dev Tools, 3:24 you can see that the App component now has a state of players and it's an array. 3:26 And you should see the app display the initial player state, 3:32 much like it always has. 3:35 One important concept to understand is the different types of state. 3:41 There are two main types of state I consider when designing a React tab, 3:45 application state and component state. 3:49 Application state is the main state we typically think about. 3:52 It's usually the data that's available to the entire app. 3:56 In our scoreboard app, application state lives in the app component, and 4:00 all of its child components have access to it. 4:05 The counter however has state that's not shared or 4:08 visible outside of the component. 4:12 It's state required just for 4:15 that component to do it's job like increasing and decreasing the score. 4:16 This type of state is refered to as local component state. 4:21 All right, now that you know more about application and 4:26 component state, in the next video I'll teach you how to remove items from state. 4:29
You need to sign up for Treehouse in order to download course files.Sign up