Now that you have the hang of sharing state between components and updating data

in the Scoreboard app, let's keep it going by adding players to the scoreboard.

We'll create a form with a text field for naming the new player, and

a button that will add the player on formSubmit.

As you'll learn,

form elements in React work differently than regular HTML form elements.

We'll start by creating a new component named addPlayerForm.

So let's create a new file in our project named AddPlayerForm.js.

As usual, we'll import React at the top of the file with import React from 'react'.

Since this is going to be a stateful component, it needs to be a class.

So let's also import component from react.

Then define the class with class AddPlayerForm extends Component,

inside the class, add the render method,

and the return statement inside that.

Let's also export the class at the bottom of the file

with export default AddPlayerForm.

All right, now let's create the form elements.

In the return statement, add opening and closing form tags.

Inside the form add an input with a type

attribute set to, "text".

And a placeholder attribute with the value, "Enter a player's name".

Keep in mind that JSX requires a self closing tag on imput elements,

otherwise react will throw a syntax error.

Next, we'll create the submit button with an input

element with a type attribute set to submit.

And we will have it display the text add player with a value attribute.

Now let's display this form inside the main app component.

At the top of App.js.

Let's import AddPlayerForm from ' ./AddPlayerForm',

and we'll add the AddPlayer PlayerForm tag right beneath the Players list.

Let's have a look in the browser, and good!

the structure of our form is all set.

In React, form elements work differently from other elements because form elements

naturally keep some internal state.

input fields in html for example are typically considered stateful.

When you type into a text field, you are changing it's state.

The values update based on user input.

In react, we need to handle a form element state explicitly.

For example, if I set the text fields value to Guil, then try to type

inside the text field Notice how I'm not able to change the value.

This definitely seems strange and not what you'd expect to happen, so

why does this happen?

You see, when a user types into a text field,

they are changing the state of the text field.

I set the value of the input to Guil.

So if its state were to change, by typing into it, it would mean that the updated UI

state is out of sync with the code, which is explicitly set to the value Guil.

So React doesn't allow that change, for good reason.

To manage our input field state,

we'll need to build what's called a controlled component.

A controlled component renders a form that controls what happens in that form on

subsequence user input.

In other words it's a form element whose value is controlled by a react with state.

Creating a control component for an input element usually works like this.

You create a state for the value of the input then listen for

changes on that input to detect when the value is updated from typing into it, for

example and create an event handler that updates the states to the new value.

Setting the inputs value property to the state,

ensures that the content in the text field is always in sync with the state.

So let's implement that now.

First, let's create the component state in the add player

form class by adding the state property, equal to an object.

Inside of the project add the property value and

set it to an empty string initially.

Then, we'll set the input value property to this.state.value.

Next, let's provide our input reacts built in on change event.

The on change event gets triggered immediately after each change.

For example, when the user types in to the input element.

Let's pass it the event handler to execute with this.handleValueChange.

Now, let's create the handleValueChange function that will update the value state.

This error function will be passed a Dom event for the change in the element.

This is actually a normalized event created by React.

React uses a cross-browser wrapper around the browser's native event called

syntheticEvent.

So that the cross-browser differences of DOM events won't get in our way.

You can learn more about the React synthetic event in the teacher's notes.

Inside the function, we'll update the value state with this.setState,

passing it an object and the property to update, value.

The event object provides a target property,

which points to the underlying input element in the dom.

We can read the value from it and use it to update our state

with e.target.value Alright our event handler is complete.

Now in the render method I'll log the value

state to the console to see what we get.

Over in React dev tools, we can inspect the AddPlayerForm

component And see the State update as we type.

All right, we now have a controlled input,

which means that we manually manage the value state of the component.

In the next video, we'll write the code that will add a new player to

the scoreboard when the form is submitted.