Forms in React

In most of the Application, your a going to take user input at some point in time.

So, Let's create a simple Login Form.

function NewsLetterForm() {
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Login</button>
    </form>
  )
}

When you submit this form the browser by default makes a GET request to the current URL with values of the form as a Query Parameter in URL and it's causing a full-page reload.

http://localhost:3000/exampe1.html?email=bipin%40gmail.com

You can prevent this behavior by calling the event.preventDefault() method.

function NewsLetterForm() {
  const handleSubmit = event => {
    event.preventDefault()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Login</button>
    </form>
  )
}

The event Object is not an actual DOM event but looks and behaves like a real DOM event. You can also access the native DOM event by using the event.nativeEvent property.

React does this to increase the performance of the Application.

Let's access the values of the input filed.

There are several ways to access the value of the input.

Via their index: event.target.elements[0].value
Via the elements object by their name or id attribute: event.target.elements.email.value

function NewsLetterForm() {
  const handleSubmit = event => {
    event.preventDefault()
    const email = event.target.elements.email.value;
    const password = event.target.elements.password.value;
    alert(`Your email is ${email} and password is ${password}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="Enter your email address"
      />
      <input
        type="password"
        name="password"
        placeholder="Enter your password"
      />
      <button type="submit">Submit</button>
    </form>
  )
}

Example 1

Let's validate the password field to meet the following criteria.

must be at least 8 characters
must contain a capital letter
must contain a number
must contain a special character

We need two things to archive the above functionalities.

A variable to store the value of the input and an updater function to update the value of the variable whenever the user changes the value of the input.
A change handler (onChange).

In React we have a hook (kinda method) called useState which takes the initial value and returns an array.

We are going to talk about hooks in the next series.

function Counter() {
  // password is variable and setPassword is updater function
  const [password, setPassword] = React.useState('')

  return null;
}

In React, there an event handler called onChange which fires when the user changes the value of the input field.

function Counter() {
  // password is variable and setPassword is updater function
  const [password, setPassword] = React.useState('')
  const handleChange = event => setPassword(event.target.value)

  return (
    <input
      type="password"
      name="password"
      value={password}
      placeholder="Enter your password"
      onChange="{handleChange}"
    />
  )
}

Example 2

I hope you learned something from this article and if you have any doubts, please leave a comment. I will be delighted to answer all of your questions.

My name is Bipin Rajbhar and I am a software engineer at QuikieApps, and you can follow or connect to me on Twitter and Linked In

Resources
The Beginner's Guide to React
Epic React

Blog

Bipin Rajbhar

Join Our Newsletter. No Spam, Only the good stuff.

Related