Section 16: Handling Forms & User Input - Working with Values, Validation & State

The goals

💪🏻What's Complex About Forms?

✌🏻Handling Inputs & Forms with React

👍🏻Simplifications

 

So here we wrote the first code to get the value of input whenever user types something.

We get the event and extract the value of it.

It updates the state of variable 'enteredName'.

 

const formSubmitssionHandler = (event) => {
    event.preventDefault();
  };

And add this code below.

Why?

We are dealing with some vanilla Javascript behavior and browser behavior, the default action by the browser is that if a form is submitted, then http request is automatically sent to the server. The problem is that we don't have any specific server want to handle this request, just have static server to make our basic html file work.

 

ref always has 'current' cause it returns objects.

So since we put this ref in input tag, it will bring the value of input as 'current'

 

import { useRef, useState } from "react";

const SimpleInput = (props) => {
  const nameInputRef = useRef();
  const [enteredName, setEnteredName] = useState("");

  const nameInputChangeHandler = (event) => {
    setEnteredName(event.target.value);
  };

  const formSubmitssionHandler = (event) => {
    event.preventDefault();

    console.log(enteredName); // Olivia

    const enteredValue = nameInputRef.current.value;
    console.log(enteredValue);  // Olivia
  };

  return (
    <form>
      <div className="form-control">
        <label htmlFor="name">Your Name</label>
        <input
          ref={nameInputRef}
          type="text"
          id="name"
          onChange={nameInputChangeHandler}
        />
      </div>
      <div className="form-actions">
        <button>Submit</button>
      </div>
    </form>
  );
};

export default SimpleInput;

So we get two 'Olivia' values on our console.

There are the two approaches we can choose, either every keystroke check with a state or use a ref to bring the value when we need.

 

UseState vs UseRef  in Input

If we are only interested in getting value once the form is submitted, because checking every keystroke is a bit overkilll then. We don't have to do that when we only want the value once.

If we need the entered value after every keystroke, for example, for instant validation.

Another reason for using a state instead of a ref could be the situation that if we wanna reset the entered input like after submitting the form, we can reset the value of each input.

 

 

'wasTouched" state

We reckon user has touched the app when the form is submitted.

 const [enteredNameTouched, setEnteredNameTouched] = useState(false);

So we add the code to check the state.

const nameInputIsInvalid = !enteredNameIsValid && enteredNameTouched;

  const nameInputClasses = nameInputIsInvalid
    ? "form-control invalid"
    : "form-control";

Put this condition on code to apply css class for each situation.

So if the enteredName is invalid and enteredName is touched then we will apply css effect 'form-control invalid'

 

const formSubmissionHandler = (event) => {
    event.preventDefault();

    setEnteredNameTouched(true);

and below the formSubmissionHandler we add the code to change the state of setEnteredNameTouched to 'true'

 

Now we make our own email input and add validation code.

But I just copied and pasted the name input code, so code is repeating. It's uneffective.

 

Now we will build custom hook to make our file slimmer.

The one thing we should keep in mind when we make a hook that it should be generic cause it's not limited to one specific input!

 

So when we copy and paste our code to new hook file to make it as our custom hook, we can't just bring the same validation code since it only focuses on one specific input.

 

 

 

 

Sources

https://academind.com/tutorials/reactjs-a-custom-useform-hook

Creating a Custom useForm Hook

https://formik.org/

Formik