Controlled Components

Now that you have the hang of sharing state between components and updating data 0:00 in the Scoreboard app, let's keep it going by adding players to the scoreboard. 0:04 We'll create a form with a text field for naming the new player, and 0:09 a button that will add the player on formSubmit. 0:13 As you'll learn, 0:15 form elements in React work differently than regular HTML form elements. 0:16 We'll start by creating a new component named addPlayerForm. 0:21 So let's create a new file in our project named AddPlayerForm.js. 0:25 As usual, we'll import React at the top of the file with import React from 'react'. 0:31 Since this is going to be a stateful component, it needs to be a class. 0:39 So let's also import component from react. 0:43 Then define the class with class AddPlayerForm extends Component, 0:50 inside the class, add the render method, 0:58 and the return statement inside that. 1:03 Let's also export the class at the bottom of the file 1:07 with export default AddPlayerForm. 1:12 All right, now let's create the form elements. 1:17 In the return statement, add opening and closing form tags. 1:20 Inside the form add an input with a type 1:26 attribute set to, "text". 1:31 And a placeholder attribute with the value, "Enter a player's name". 1:37 Keep in mind that JSX requires a self closing tag on imput elements, 1:47 otherwise react will throw a syntax error. 1:53 Next, we'll create the submit button with an input 1:57 element with a type attribute set to submit. 2:02 And we will have it display the text add player with a value attribute. 2:06 Now let's display this form inside the main app component. 2:14 At the top of App.js. 2:20 Let's import AddPlayerForm from ' ./AddPlayerForm', 2:24 and we'll add the AddPlayer PlayerForm tag right beneath the Players list. 2:30 Let's have a look in the browser, and good! 2:43 the structure of our form is all set. 2:46 In React, form elements work differently from other elements because form elements 2:50 naturally keep some internal state. 2:54 input fields in html for example are typically considered stateful. 2:56 When you type into a text field, you are changing it's state. 3:00 The values update based on user input. 3:03 In react, we need to handle a form element state explicitly. 3:07 For example, if I set the text fields value to Guil, then try to type 3:11 inside the text field Notice how I'm not able to change the value. 3:15 This definitely seems strange and not what you'd expect to happen, so 3:20 why does this happen? 3:24 You see, when a user types into a text field, 3:25 they are changing the state of the text field. 3:28 I set the value of the input to Guil. 3:31 So if its state were to change, by typing into it, it would mean that the updated UI 3:33 state is out of sync with the code, which is explicitly set to the value Guil. 3:38 So React doesn't allow that change, for good reason. 3:43 To manage our input field state, 3:47 we'll need to build what's called a controlled component. 3:48 A controlled component renders a form that controls what happens in that form on 3:52 subsequence user input. 3:56 In other words it's a form element whose value is controlled by a react with state. 3:58 Creating a control component for an input element usually works like this. 4:04 You create a state for the value of the input then listen for 4:08 changes on that input to detect when the value is updated from typing into it, for 4:12 example and create an event handler that updates the states to the new value. 4:17 Setting the inputs value property to the state, 4:22 ensures that the content in the text field is always in sync with the state. 4:25 So let's implement that now. 4:30 First, let's create the component state in the add player 4:31 form class by adding the state property, equal to an object. 4:36 Inside of the project add the property value and 4:41 set it to an empty string initially. 4:45 Then, we'll set the input value property to this.state.value. 4:49 Next, let's provide our input reacts built in on change event. 4:54 The on change event gets triggered immediately after each change. 4:59 For example, when the user types in to the input element. 5:03 Let's pass it the event handler to execute with this.handleValueChange. 5:06 Now, let's create the handleValueChange function that will update the value state. 5:14 This error function will be passed a Dom event for the change in the element. 5:20 This is actually a normalized event created by React. 5:26 React uses a cross-browser wrapper around the browser's native event called 5:31 syntheticEvent. 5:36 So that the cross-browser differences of DOM events won't get in our way. 5:37 You can learn more about the React synthetic event in the teacher's notes. 5:41 Inside the function, we'll update the value state with this.setState, 5:46 passing it an object and the property to update, value. 5:51 The event object provides a target property, 5:54 which points to the underlying input element in the dom. 5:58 We can read the value from it and use it to update our state 6:02 with e.target.value Alright our event handler is complete. 6:08 Now in the render method I'll log the value 6:14 state to the console to see what we get. 6:19 Over in React dev tools, we can inspect the AddPlayerForm 6:37 component And see the State update as we type. 6:42 All right, we now have a controlled input, 6:49 which means that we manually manage the value state of the component. 6:52 In the next video, we'll write the code that will add a new player to 6:57 the scoreboard when the form is submitted. 7:01