Forms in React 🚧 THE SIMPLEST
Tags: showdev, react, html, javascript
Published: 2019-06-18 21:04:08

---
title: Forms in React 🚧 THE SIMPLEST
published: true
description: handling forms in react the simplest way
tags: showdev, react,HTML, javascript
---

> Form validation can be a nightmare sometimes. After trying out some patterns of code, I came to a conclusion. That this can be an optimal solution without any plugins. 
> **NOTE**: Better ways are always welcome & I'm in search for it ⌛

![Preview](https://i.imgur.com/sbdfwZD.gif)

[Code Sandbox Link]([https://codesandbox.io/s/simple-form-oio3w](https://codesandbox.io/s/simple-form-oio3w))

## InputField
> Let's get started. First things first. Let's create a component for input field.
- input field to accept user inputs and pass other common props
- *handleInvalid* method to do it's magic when it detects error
- *onChange* method to reset the error and pass on the control to the parent component

```jsx
import React from "react";

/** We'll be using this only for username and password **/
export const InputField = props => {
  const { message, ...rest } = props; // Filter what you need and transfer rest to input
  let [error, setError] = React.useState(false); //display error message

  const handleInvalid = e => {
    e.preventDefault();
    setError(true);
    props.handleInvalid(e);
  }; // Handle error
  const onChange = e => {
    setError(false);
    props.handleChange(e);
  }; // Reset error

  // The Component
  return (
    <div className="input-container">
      <input {...rest} onInvalid={handleInvalid} onChange={onChange} />
      {error ? <span className="error-message">{message}</span> : ""}
    </div>
  );
};

```
##  Form Component
>Now let's create a Form Component that will wrap our input fields around a form and some methods to handle it. 
- We have a state variable which will hold our form object 
- *handleChange* method to handle specific updates in input fields according to name.
-  *handleSubmit* method which would help us hitting API once all fields are filled properly 
- **action="javascript:void(0)"** this was of my particular interest when I was trying to find out the best way to handle forms. It would prevent the form element from doing default work.

```jsx
import React from "react";
import { InputField } from "./InputField";

export const Form = props => {

  const [state, setState] = React.useState({ mail: "", password: "" });

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

  const handleSubmit = e => console.info("FORMDATA", state);

  return (
    <form
      action="javascript:void(0)"
      onChange={handleChange}
      onSubmit={handleSubmit}
    >
      <InputField name="mail" type="email" message="We need a proper mail id" />
      <InputField name="password" minLength="9" type="password" message="Not a valid password"
      />
      <input type="submit" value="Login" />
    </form>
  );
};
```
## App.css
Now let's add some css to make it look atleast a little bit uilicious
```css
.error-message {
  color: darkred;
  text-align: right;
  font-size: 12px;
}

.input-container {
  display: flex;
  flex-direction: column;
  width: 40%;
  margin: auto;
}

.input-container > input {
  border-top: none;
  border-right: none;
  border-left: none;
  margin-bottom: 5px;
  margin-top: 20px;
}

input:invalid {
  border-color: darkred;
}
```

So I hope how easy it can be to handle forms in React. It's all patterns. Critics are most welcome as I'm searching for further best practices in form.
Just let me know if there's something that can be done better than this