Adding Items to State7:33 with Guil Hernandez
Now it's time to let users add players to the Scoreboard! First, we'll create an event handler that allows users to submit the form. Then we'll write a function that adds the new player to state and displays it in the UI.
All right, now it's time to let users add players to the scoreboard. 0:00 We're going to use the add player form to submit player names. 0:04 When the form submits, we'll add the name along with an initial score and 0:08 player ID to the player state. 0:12 First, we're going to create an event handler to allow users to submit the form, 0:14 and then a function that will add the new player to state and 0:18 display it on the board. 0:21 Let's get to it. 0:23 Currently, the AddPlayerForm component 0:24 has no access to the player state maintained in the app component. 0:27 And the AddPlayerForm component state is local state meaning it's just state that's 0:32 needed for the component to do its job, and no other components have access to it. 0:38 So in order to add a new player to state, AddPlayerForm needs access to 0:42 the player state so that it can update it with the submitted data. 0:47 You learn that we can use a callback function to send data up 0:51 the component tree. 0:54 So that's what we're going to do here, 0:56 and we'll work our way from the bottom up this time. 0:58 To begin creating a new player in state, 1:00 let's have the add player form component accept a call back function via a prop. 1:02 This function will be called inside an event handler, and 1:07 it will pass a new player name up to the app component when the form submits. 1:10 So in the add player form class, 1:15 let's create the event handler as an error function named handleSubmit. 1:17 First, we'll prevent the forms default behavior 1:25 by calling preventDefault on the event object. 1:30 If we don't prevent the form's default submit behavior, 1:35 it will result in the browser posting a request back to the server. 1:38 That would cause our application to reload in the browser, 1:41 which means that we'd lose all of our application state in the process. 1:44 After calling preventDefault, we'll call the function that's 1:47 going to be passed the props here with this.props.addPlayer. 1:52 Now we haven't created this function yet, but we will soon. 1:57 Now let's pass the functions call back, the value state, with this.state.value. 2:01 All right, with the handler created, 2:08 let's bind it to the form submitevent using React's built-in onSubmit property. 2:11 And now as the value write this.handleSubmit. 2:20 The onSubmit event will execute the handleSubmit function as soon 2:24 as the form is submitted by either clicking the submit button or 2:29 pressing the Enter or Return key. 2:33 All right, 2:35 now let's create a function that will add a new player to the player state. 2:36 Remember, in handleSubmit, we are calling and 2:40 passing information to a function via a prop named addPlayer. 2:43 So in App.js, let's give the addPlayer form component the prop addPlayer, 2:48 and pass it a function named handleAddPlayer with this.handleAddPlayer. 2:55 We haven't written this function yet, so let's do that now. 3:04 Below handle score change, create an error function named handleAddPlayer. 3:07 The function will take a name parameter for 3:17 the name of the player being submitted. 3:20 In the function, we'll update the player state using this.setState. 3:23 Pass setState an object, and the property to update players. 3:31 The property points to an array. 3:37 In the array, I'll add a new object literal. 3:39 This is going to be the new player. 3:41 Each player object in state has three properties, name, score, and ID. 3:43 I'll create a new player object using the name passed 3:53 to the function, and set the default score to 0. 3:57 Now, to make the object more concise, whenever a key and variable name match, 4:02 we can use the ES2015 shorthand syntax by writing just the key name. 4:07 So we can write the name property and value as just name. 4:11 Now we need to come up with a unique ID for each new player. 4:17 There are many different ways we can do this. 4:22 What I'll do is create a counter property here just below the initial state. 4:24 I'll name it PrevPlayerId. 4:33 We're going to increment its value by 1 every time we add a player to state. 4:40 So as the initial value, since we've use the IDs 1 through 4 here in state, 4:46 I'll initialize it to the last ID, the number 4 for now. 4:51 Then in the handleAddPlayer function, 4:56 I'll supply a unique id to each new player as they're 5:00 created by setting the value of the id property here 5:05 in setState to this.prevPlayerId += 1. 5:10 This will increment prevPlayerId by 1 each time handleAddplayer and 5:14 and setState get called. 5:19 That way, we can be sure that our id value increments correctly just as state is 5:21 updated. 5:25 Again, there are ways we could create the id, by for 5:26 example creating a function that generates a unique id or declaring a counter 5:29 available outside of the class instead of a property on the class. 5:33 Finally, we need to bring in all the existing player objects in state and 5:37 combine them with the new player object being added to state. 5:42 There's more than one way we can do this. 5:46 I'll use the spread operator to bring in a copy of all the existing player objects 5:48 in state into this updated players array with ...this.state.players. 5:54 This merges the existing objects in the original 6:03 player state with the new array being created here. 6:08 That way we're not modifying or mutating the original players array. 6:13 All right, we're just about finished with this feature. 6:17 Let's have a look at what we've built so far. 6:20 Over in the scoreboard, I'll type a played name into the text field, 6:23 then press the Enter key or click the Submit button. 6:28 We see the new player added to the bottom of the players list, and 6:32 the total player stat updates to 5, good. 6:36 In react div tools, we see a new player object and state. 6:39 Inspect the new player component and 6:44 you will see that a new ID of 5 was created as its key value. 6:48 And if we add another player, the key value increments by one and so on. 6:53 Finally, the text field should clear once a user submits a name. 7:02 To clear it, I'll go back to the handle submit function in AddPlayerForm.js, 7:07 and update the value state to an empty string with this.setState. 7:14 Now, when I submit a new name, we see the text field clear on submit. 7:25 Great. 7:31
You need to sign up for Treehouse in order to download course files.Sign up