Forms

Question 1

Controlled Components & single source of truth

Answer 1

In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components and only updated with setState().

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

Question 2

Example of controlled component & single source of truth

Answer 2

For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);   }

handleChange(event) {
this.setState({value: event.target.value});
}

handleSubmit(event) {
alert(‘A name was submitted: ‘ + this.state.value);
event.preventDefault();
}

render() {
return (

      Name:

);   } }

Since the value attribute is set on our form element, the displayed value will always be this.state.value, making the React state the source of truth. Since handleChange runs on every keystroke to update the React state, the displayed value will update as the user types.

Question 3

Controlled component & React state

Answer 3

With a controlled component, the input’s value is always driven by the React state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers.

Question 4

The textarea Tag

Answer 4

In HTML, a element defines its text by its children. In React, a uses a value attribute instead. This way, a form using a can be written very similarly to a form that uses a single-line input. Notice that this.state.value is initialized in the constructor, so that the text area starts off with some text in it:

class EssayForm extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ‘Please write an essay about your favorite DOM element.’
};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);   }

handleChange(event) {
this.setState({value: event.target.value});
}

handleSubmit(event) {
alert(‘An essay was submitted: ‘ + this.state.value);
event.preventDefault();
}

render() {
return (

      Essay:

);   } }

Question 5

The select Tag

Answer 5

React, instead of using the selected attribute, uses a value attribute on the root select tag. This is more convenient in a controlled component because you only need to update it in one place. For example:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);   }

handleChange(event) {
this.setState({value: event.target.value});
}

handleSubmit(event) {
alert(‘Your favorite flavor is: ‘ + this.state.value);
event.preventDefault();
}

render() {
return (

      Pick your favorite flavor:

        Grapefruit
        Lime
        Coconut
        Mango

);   } }

Overall, this makes it so that , , and all work very similarly - they all accept a value attribute that you can use to implement a controlled component.

Question 6

The file input Tag

Answer 6

In HTML, an lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the File API.

Because its value is read-only, it is an uncontrolled component in React.

Question 7

Handling Multiple Inputs

Answer 7

When you need to handle multiple controlled input elements, you can add a name attribute to each element and let the handler function choose what to do based on the value of event.target.name:

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

this.handleInputChange = this.handleInputChange.bind(this);   }

  handleInputChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

this.setState({
  [name]: value
});   }

render() {
return (

      Is going:

    <br>

      Number of guests:

);   } }

Note how we used the ES6 computed property name syntax to update the state key corresponding to the given input name:

this.setState({
[name]: value
});

It is equivalent to this ES5 code:

var partialState = {};
partialState[name] = value;
this.setState(partialState);

Also, since setState() automatically merges a partial state into the current state, we only needed to call it with the changed parts.