Forms in React
Tags: react, webdev, beginners, tutorial
Published: 2020-11-03 14:01:36

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.

```jsx
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.

```jsx
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``

```jsx
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**
{% codepen https://codepen.io/bipinrajbhar/pen/jOrxZje %}

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.

1. 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.

2. 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.

```jsx
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.

```jsx
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**
{% codepen https://codepen.io/bipinrajbhar/pen/zYBaqZm %}

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](https://www.quikieapps.com/), and you can follow or connect to me on [Twitter](https://twitter.com/Bipin_1598) and [Linked In](https://www.linkedin.com/in/bipinrajbhar1598/)

**Resources**
[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
[Epic React](https://epicreact.dev/)