Remove Items From State

All right, now let's create the delete player feature. 0:00 Inside the App class, let's write a new error function called handleRemovePlayer, 0:03 The function takes an id parameter for the player to remove from state. 0:13 Inside the function, add this.setState and 0:18 pass it an object containing the property to update, in this case, players. 0:22 Remember, we should never modify or mutate state directly. 0:28 In order to remove a player from the players array and 0:34 state, we need to produce a new array 0:36 that no longer contains the player object we want to remove. 0:38 There are several ways we could do this, a common and 0:42 reliable way is with the filter array iteration method. 0:44 Filter is used to remove elements from an array without affecting the original 0:47 array. 0:52 So we could filter through the player's array and 0:52 state with this.state.players.filter. 0:56 But we're updating the player's array based on the previous state. 0:59 So we wanna avoid updating the player state directly, 1:05 by accessing this.state.players. 1:09 So like we did earlier, 1:11 let's have set state take a callback function with the parameter prevState. 1:13 The function needs to return 1:19 the updated player state. 1:24 And we'll produce the updated state 1:32 with prevState.players.filter. 1:37 Like the map method, the filter method takes a callback function. 1:42 The first parameter of the callback represents the current 1:46 item being processed in the array. 1:49 I'll name it p for player. 1:51 Then we need to return all player objects and 1:53 state except for the one we want to remove. 1:56 The way we do that is using the player id. 2:00 So we'll return p.id not strictly equal to id. 2:04 So when handleRemovePlayer is invoked, we iterate through 2:08 the player's array and state and filter out only the player object 2:12 whose id does not equal the id passed into handleRemovePlayer. 2:18 This function will eventually be called 2:23 in the Player component when the user clicks the delete button. 2:26 Now, if the Player component is a child of App, 2:30 how will it have access to the function written in the App class? 2:33 Through props, props is what React uses to pass data from component to component. 2:38 You can pass functions through props, even data from state. 2:44 So next, 2:47 we need to supply the handleRemovePlayer function to the Player component. 2:48 So in the map function, 2:53 let's give the player component a new prop named removePlayer. 2:55 Then we'll pass the function down to player with this.handleRemovePlayer. 3:01 And we also need to pass the player id as a prop, 3:07 that way we can use it to let the function know which player to remove. 3:12 So let's add a prop named id and pass it player.id. 3:19 So handleRemovePlayer is going to be called at a later 3:22 time through some interaction with the Player component. 3:27 In this case, when a user clicks a delete button and 3:33 it's going to change the player state that is maintained in the parent App component. 3:37 If you have a look at the app in React Dev tools, you should see that each 3:44 Player component has a removePlayer prop, and its value is a function. 3:49 This means that the Player component now has access to the function and 3:54 state defined in its parent App component. 3:59 To demonstrate, I'll scroll up to the player function in 4:06 concole.log props.removePlayer. 4:10 In the console, you'll see that it logs the handleRemovePlayer function. 4:15 So player is now able to send data back to it's parent App component 4:19 through the call back function that's being passed to it through props. 4:23 Good, inside the Player component, 4:26 a delete button is going to trigger the change in the player state. 4:28 So let's create the button now, inside the span tags, add a button element. 4:32 You can copy this element along with the close icon from the teacher's notes 4:39 with this video. 4:43 The button will get the class remove-player for 4:44 styling purposes, and an onClick event. 4:50 Then, to call the handle remove player function when the button is clicked, 4:55 I'll pass onClick, an anonymous function, using an arrow function. 5:01 That returns a call to the function which is being passed in through props 5:06 with props.removePlayer. 5:11 Finally, we need to pass the player id to the function so 5:14 that it knows which player to remove onClick. 5:17 We'e passing the id as a prop, so we can access it with props.id. 5:19 So now, the handleRemovePlayer function, written in the App component, 5:26 gets all the information it needs to remove a player from state, let's try it. 5:30 Over in the browser, click the delete icon, 5:35 that player is removed from the UI and the total player count updates correctly. 5:38 And in React Dev tools, you can see that a player object is removed 5:44 from the application state each time I click the delete button. 5:48 In this course, we built the basic functionality of the scoreboard. 6:00 For now, we're able to add players manually in the initial app state. 6:04 We can remove players, modify scores and 6:08 see the total number of players in our game. 6:11 You have the foundational knowledge to begin building and 6:13 contributing to all sorts of React applications. 6:16 But there's a whole lot more to learn about in React. 6:19 In a follow up course, you'll build a more advanced version of the scoreboard app 6:22 that will introduce new key concepts and features of React and best practices for 6:26 building and working with components. 6:31 You'll find the link to the course along with other helpful React courses and 6:32 workshops in the teachers notes with this video. 6:36 Remember, we're here to help, so 6:38 if you have questions about anything covered in this course, 6:40 feel free to reach out to the Treehouse staff or other students in the community. 6:43 Thanks, everyone, and happy coding. 6:47