Reading 4

React Forms and Controlled Components

Controlled Components is a technique used to handle form submissions in React. Think back to HTML: when a user submitted a form, it would automatically browse to another page. Although this does work with React, it is convenient to create a handleSubmission function and continue to have access to the input data. Since React uses state to update the form, each keystroke will provide an update. That state can also be used elsewhere in the application.

• The React Component controlled in this manner is the ‘single source of truth’
• The React Component controls what happens on each following user input

Here is how you target the form event with a handler function:

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

This will allow you to change/update the state of the form component as it is being typed.

The Ternary Operator 🔍

Ternary operators make conditional ‘if’ statements much more streamlined, reducing the amount of code required to achieve the same outcome. Let’s look at how they are written:

condition ? value if true : value if false

The ? is the operator. It essentially is your “if”. Let’s create an example.

person.age >= 21 ? 'Enjoy your beverage' : 'No drinks for you'

In the above example, the condition says that the person object’s age must be equal to or greater than 21. IF (?: ternary operator) it is, result is ‘Enjoy your beverage. Otherwise, ‘No drinks for you’.

Why use the ternary operator? It cleans up your code, especially when nested!

One last example: Before

if(x===y){
 console.log(true);
  } else {
 console.log(false);
  }

After

x===y ? console.log(true) : console.log(false)