Handling Input In React

Road Map

• Set Up
• Review the Starter Code
• Controlled Inputs in React
• Adding the New Skill to State

Set Up

Let's create a new React Project on codesandbox.io

Replace the existing <App> component with this starting code:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [state, setState] = useState({
    skills: [{ skill: "JavaScript", level: 4 }]
  });

  function addSkill() {
    alert("ADD SKILL CLICKED");
  }

  return (
    <section>
      <h2>DEV SKILLS</h2>
      <hr />
      {state.skills.map((s) => (
        <article key={s.skill}>
          <div>{s.skill}</div> <div>{s.level}</div>
        </article>
      ))}
      <hr />
      <form>
        <label>
          <span>SKILL</span>
          <input name="skill" />
        </label>
        <label>
          <span>LEVEL</span>
          <select name="level">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </label>
        <button>ADD SKILL</button>
      </form>
    </section>
  );
}

Let's replace the contents of styles.css with:

	* {
	  box-sizing: border-box;
	}
		
	body {
	  font-family: Arial, Helvetica, sans-serif;
	  height: 100vh;
	  display: grid;
	  justify-items: center;
	  align-items: center;
	}
		
	h2 {
	  color: #f17d80;
	  margin: 0;
	  text-align: center;
	}
		
	section > article {
	  display: flex;
	  justify-content: space-between;
	  min-width: 15rem;
	  color: white;
	  margin: 0.1rem;
	  background-color: #737495;
	}
		
	article > div {
	  padding: 0.5rem;
	}
		
	article > div:nth-child(2) {
	  width: 2rem;
	  background-color: #f17d80;
	  text-align: center;
	}
		
	label {
	  display: flex;
	  align-items: center;
	  margin-top: 0.5rem;
	}
		
	label span {
	  color: #737495;
	  width: 4.5rem;
	}
		
	input,
	select {
	  width: 100%;
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 1rem;
	  font-weight: bold;
	  padding: 0.4rem;
	  color: #f17d80;
	  border: 2px solid #737495;
	  border-radius: 0;
	  outline: none;
	  -webkit-appearance: none;
	}
		
	button {
	  display: block;
	  font-family: Arial, Helvetica, sans-serif;
	  font-size: 1rem;
	  margin: 0.5rem 0 0 auto;
	  padding: 0.4rem;
	  background-color: #f17d80;
	  color: white;
	  border: none;
	  outline: none;
	}
		
	button:hover {
	  color: white;
	  background-color: #737495;
	}

The sandbox will look something like this once the above setup is complete:

Review the Starter Code

Currently the app is not functional - it doesn't add new Dev Skills to the list.

We will implement this functionality soon.

Controlled Inputs in React

Controlled Inputs - The "React Way" to Handle Input

How many times have you heard us say that things are a little different in React?

Handling inputs is also different - by inputs, we are talking about the <input>, <textarea> & <select> React elements that are commonly used to get input from a user.

React prefers that we don't access DOM elements directly. In fact, at this point, we haven't even seen how to access DOM elements directly via React. However, by the end of this lesson you will.

So, if we don't access an input's value like we typically do in JS, e.g., inputEl.value, what's the secret?

The secret, like many things in React is state! React, wants the text/value of inputs to be held in state.

React "controlled" inputs have their value assigned to them via the value prop, which will be bound to the appropriate state property using a JSX expression. For example, if you had a title property in the state, you could bind that title property to an <input> as follows:

<input value={state.title} />

So for our Dev Skills app, if the <input> & <select> inputs currently in <App> are going to get their values from state, we're going to need to add two new properties to state dedicated to maintaining the "state" of each input:

  const [state, setState] = useState({
    skills: [{ skill: "JavaScript", level: 4 }],
    skill: "",
    level: "3"
  });

Notice that we intend to initialize the value of the <select> for the skills's level to "3".

Now, we can "connect" those state properties to their respective inputs using the value prop:

  ...
  {/* Connect the input to state.skill */}
  <input name="skill" value={state.skill} />
</label>
<label>
  <span>LEVEL</span>
  {/* Connect the select to state.level */}
  <select name="level" value={state.level}>
  ...

As predicted, the <select> has been initialized to "3":

Try assigning a "default" string value to the skill property in state

Updating Inputs

Since the inputs are linked to state, updating the values displayed requires us to use the setter function to update their state properties.

Go ahead and try to change their values by interacting with the inputs - denied!

The React way for controlled inputs requires using event handlers to update the state.

First add an onChange prop to the <input>:

<span>SKILL</span>
<input
  name="skill"
  value={state.skill}
  {/* Add an event handler */}
  onChange={handleChange}
/>

Unlike the change event in vanilla JS which is triggered only after an <input> or <textarea> loses the focus, the onChange prop's assigned event listener will be invoked each time the user types something.

Now add the handleChange function that will be called every time a character is added or deleted:

// Add the onChange event handler
 function handleChange(e) {
   /* 
    the setter function 
    allows us to access previous state 
    and override it with new values 
   */
    setState((prevState) => ({
      ...prevState,
      skill: e.target.value
    }));
  }

Rock and roll!

Now let's do the same for the <select>.

However, the current handleChange function is dedicated to the updating the skill property.

Does this mean you have to create a new function for each input?

Not if you know modern JavaScript you don't!

Refactor handleChange as follows to take advantage of computed property names within object literals:

function handleChange(e) {
    setState((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value
    }));
  }

Those square brackets on the left-hand side of the colon allow us to use an expression to "compute" the property name!

That single handler can now update state for any number of inputs - just be sure the values assigned to the name props match the names of the properties in the state object.

Okay, let's add the event handler to the <select>:

<select
  name="level"
  value={state.level}
  onChange={handleChange}
>

Now you know how "Controlled" inputs work in React!

💪 Practice Exercise

When gathering data from the user using inputs, at some point you're going to want to do something with that data, for example:

• Use AJAX to send it to a server, or
• Add it to another part of the app's state

To do so, it's nice to have all of the related data isolated in its own object to ease the use of it.

Currently however, the skill and level properties on state are not isolated from skills.

Do the following refactor:

1. Move the skill & level properties to a newSkill object on state. When finished with this step, state will have just two top level properties: skills (the array of skills entered) & newSkill (the object linked to the inputs for adding a new skill).

   Hint: You will also need to update the value props of the inputs.

2. Update the handleChange function so that it replaces, the newSkill object when either skill or level are being changed.

When finished, be sure to test it out by changing both inputs.

How'd you do? ... no worries if you weren't able to figure it out

Here's one possible solution:

  function handleChange(e) {
    setState((prevState) => ({
      ...prevState,
      newSkill: {
        ...prevState.newSkill,
        [e.target.name]: e.target.value
      },
    }));
  }

Adding the New Skill to State

No Forms Required

A key point to realize when it comes to using forms in React is that, we don't need them.

Unlike the traditional web apps we've built so far using Express, SPAs don't use forms to send data to the server.

Further, we don't need to wrap the skill or level inputs in a <form> to be able to add them to the DEV SKILLS list.

It's just a matter of updating state by adding the newSkill object to the skills array - and we don't need a form to do that. No form or submit button is necessary - we can update state whenever we want to: when the user interacts with the app, when a timer event happens, etc.

Let's write the code for the the addSkill function.

We'll review as we go:

  function addSkill() {
    setState((prevState) => ({
      skills: [...prevState.skills, state.newSkill],
      newSkill: { skill: "", level: "3" }
    }));
  }

Using Forms in React

Although forms are not required for handling input in React, they can provide benefits such as:

• Using CSS frameworks to perform styling on inputs that rely on them being wrapped in a form.
• Validation of inputs.

Currently, the <form> component is being rendered in the DOM:

Note that unlike forms we've used before, there's no action or method attributes - nor, should there ever be in a SPA's forms.

However, despite those missing attributes, and despite the fact that the [ADD SKILL] button within the form is not of type="submit, the darn form will still send off an HTTP request if we press [return] while inputting data or click the button - triggering a full-page refresh!

In React, we need to prevent the browser from submitting forms and we first do this by always using the onSubmit prop on <form> components:

<form onSubmit={addSkill}>

Then, always calling the event object's preventDefault function straight away:

function addSkill() {
  e.preventDefault();

Be sure to add a parameter (e in this case) to accept the event object.

Problem solved! The preventDefault function does just what it says, it prevents the default submit from happening.

Bonus Section. The following are optional reading:

Validating Inputs

Although the app is working as planned, we're not taking advantage of the form's HTML5 validation capabilities.

We can add a required and pattern attribute to HTML inputs to validate their data.

Let's prevent the ability to add empty skills by adding these props to the skills input:

<input
  name="skill"
  value={newSkill.skill}
  onChange={handleChange}
  {/* Add these two additional props to set constraints */}
  required
  pattern=".{3,}"
/>

One of the Web APIs included in browsers is a comprehensive constraint validation API.

It's usually more convenient to perform validation at the <form> level because its validation status will take into consideration that of all of its inputs. In other words, we don't have to check every input's validation, just the form's since if just a single input is invalid, the form will consider itself to be invalid.

One of the useful methods provided by the API is the checkValidity method that returns true if the input/form is valid, or false if it's not.

However, the API's methods must be called on the actual DOM element, thus requiring a reference to that DOM element.

As an example, let's test out the checkValidity method on just the skills input:

function handleChange(e) {
  // e.target is the DOM element that changed
  console.log(e.target.checkValidity());

Testing it shows that at least three characters need to be entered in the skill input before true is logged.

Now that we've seen how we can check an individual input's validity, let's see what it takes to check the validity of the entire form...

Using a ref to Access DOM Elements

Unfortunately, the event object's target property is not providing us with access to the <form> DOM element from within the addSkill method.

We could use the element.closest(selector) method on the inputs to find the form, however, let's take advantage of this opportunity to learn about how React provides access to DOM element by using a ref.

Key Point: Although using a ref has a few useful use cases like third-party library integration, they should be used sparingly and never to bypass React's way of updating the DOM, etc.

A ref is an object that provides access to a DOM element.

There's no reason to hold a ref in state, so we'll create one using a ref using the useRef hook like this:

// import the useRef hook
import React, { useState, useRef } from "react";
import "./styles.css";

export default function App() {
  
  // initialize our ref for our form, we'll name it formRef
  const formRef = useRef();

  const [state, setState] = useState({
    skills: [{ skill: "JavaScript", level: 4 }],
    newSkill: {
      skill: "",
      level: "3"
    }
  });

With the ref created, all that's left is to "link" it to a component's DOM element by using the ref prop:

<form ref={formRef} onSubmit={addSkill}>

Let's see what a ref looks like by logging it out:

  ...
  console.log(formRef);
    return (
  ...

Checking the console shows that the ref object has a current property used to access the DOM element.

Now we can prevent adding a new skill if the form's invalid like this:

function addSkill(e) {
    e.preventDefault();
  // Do nothing if the form is invalid
  if (!formRef.current.checkValidity()) return;

Take a moment to think about how you could use the required and pattern attributes to prevent bogus data from being processed.

Disabling the Button if the Form is Invalid

What if we want the [ADD SKILL] button to be disabled depending upon the validity status of the form?

A typical React approach would be to first create a new property in state to track the validity of the form:

  const [state, setState] = useState({
    skills: [{ skill: "JavaScript", level: 4 }],
    newSkill: {
      skill: "",
      level: "3"
    },
    formInvalid: true
  });

Use state.formInvalid to conditionally add the disabled prop to the button:

<button
  disabled={state.formInvalid}
>

The last part requires updating formInvalid each time an input changes, i.e., from within the handleChange function:

  function handleChange(e) {
    // first, we update using the formRef
    const formInvalid = !formRef.current.checkValidity();

    setState((prevState) => ({
      ...prevState,
      newSkill: {
        ...prevState.newSkill,
        [e.target.name]: e.target.value
      },
      // then we update state
      formInvalid
    }));
  }

That takes care of the functionality, however, the button won't look disabled unless we add a touch more CSS:

button:disabled {
  background-color: lightgrey;
}

Nice! Congratulations on making it this far! 🎉

References

• React Docs - Forms
• React Docs - Uncontrolled Components