React Forms | React JS Tutorial

React Forms are mostly like normal HTML forms, except we use state in this to handle inputs.

Handling Forms

In React, all the data is handled by the component and stored in the component state. We can change state with event handlers in the onChange attribute, like this:

import { useState } from 'react';
 
function Form() {
  const [email, setEmail] = useState('');
 
  return (
    <form>
      <label>
        Enter your email: <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
    </form>
  )
}
 
export default Form;

Submitting Form

We can submit the form with the onSubmit attribute for the <form>.

import { useState } from 'react';
 
function Form() {
  const [email, setEmail] = useState('');
 
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Your email is: ${email}`)
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Enter your email: <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <input type="submit" />
    </form>
  )
}
 
export default Form;

Multiple Inputs

We don't have to make multiple states for multiple inputs; we can save all values in one, like this:

import { useState } from 'react';
 
function Form() {
  const [data, setData] = useState({});
 
  const handleChange = (e) => {
    setData({...data, [e.target.name]: e.target.value})
  }
 
  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Your email is: ${data.email} and your name is: ${data.name}`)
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Enter your email: <input type="email" name='email' value={data.email} onChange={handleChange} />
      </label>
      <label>
        Enter your name: <input type="text" name='name' value={data.name} onChange={handleChange} />
      </label>
      <input type="submit" />
    </form>
  )
}
 
export default Form;

Here in handleChange, we used Spread Operators. We are basically saying keep the whole data as it was, just change this name's value. Then it is saved as an object so we are getting that by data.email and data.name.