Remove Items From State6:49 with Guil Hernandez
In this video, we'll use the
filter() array iteration method to remove an object from the
players array in 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
You need to sign up for Treehouse in order to download course files.Sign up