Approach to handle forms in React

Initialization:
- This part consists of Initializing the variables and state of the form. To manage the state we are using useState() hook and initialized the name and email.
Event Handler:
- The below example consists two handler methods:
  - handleChange(): The handleChange() method stores the updated values as a name and value pair when-ever there is a change occurred. It copies the data everytime into the Data object using setData method.
  - handleSubmit(): The handlesubmit() method console logs the collected form data into the console in the form of an Object. It also handles the default behaviour of reloading the entire page for every change in the form using the preventDefault() method.
Form Structure:
- The basic form structure which contains the ‘<input>’ tag which allows the user to enter an input long with type attribute, placeholder etc. The each input field calls the handleChange() method using onChange attribute.
- The submit button triggers the handleSubmit() method and console logs the form data where ever the submit button is clicked.

Example-1: let’s look at handling a form with two text input fields i.e. name and email

Javascript

// FormHandling.jsx
 
import React, { useState } from 'react';
import './FormHandling.css';
 
const FormHandling = () => {
    const [Data, setData] = useState({
        name: '',
        email: '',
    });
 
    const handleChange = (e) => {
        const { name, value } = e.target;
        setData({
            ...Data,
            [name]: value,
        });
    };
 
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Form data submitted:', Data);
    };
 
    return (
        <form className="form-container"
            onSubmit={handleSubmit}>
            <input type="text" name="name"
                placeholder="Enter the name"
                value={Data.name}
                onChange={handleChange} />
            <input type="email" name="email"
                placeholder="Enter the email"
                value={Data.email}
                onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    );
};
 
export default FormHandling;

Javascript

// App.js
import React from 'react';
import FormHandling from './FormHandling';
import './App.css'
 
function App() {
  return (
    <div className="component">
      <FormHandling />
    </div>
  );
}
 
export default App;

Javascript

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

CSS

/* FormHandling.css */
 
.form-container {
    max-width: 300px;
    margin: auto;
    padding: 35px;
    border: 1px solid rgb(14, 152, 14);
    border-radius: 5px;
}
 
label {
    display: block;
    margin-bottom: 10px;
}
 
input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    margin-left: -10px;
    border: 0.5px solid rgb(176, 175, 175);
}
 
button {
    background-color: #4caf50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
button:hover {
    background-color: #45a049;
}

CSS

/*App.css*/
.component {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Output:

Example-2: Let us look at how form handling looks with multiple input fields of different types.

Javascript

//FormHandling.jsx
import './FormHandling.css';
import { useState } from 'react';
 
function FormHandling() {
 
    const [Data, setData] = useState({
        username: '',
        email: '',
        occupation: '',
        gender: '',
        languages: [],
    })
 
    const handleChange = (e) => {
        if (e.target.name === 'languages') {
            let copy = { ...Data }
            if (e.target.checked) {
                copy.languages.push(e.target.value)
            } else {
                copy.languages = copy.languages.filter(el => el !== e.target.value)
            }
            setData(copy)
 
        } else {
            setData(() => ({
                ...Data,
                [e.target.name]: e.target.value
            }))
        }
    }
    const handleSubmit = (e) => {
        e.preventDefault()
        console.log("form submitted: ", Data)
    }
    return (
        <div className="form-container">
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <label htmlFor="username"
                        className="form-label">User Name</label>
                    <input className="form-control"
                        placeholder="Enter the username"
                        name="username"
                        onChange={handleChange}
                        value={Data.username} />
                </div>
                <div className="form-group">
                    <label htmlFor="email"
                        className="form-label">Email</label>
                    <input className="form-control"
                        placeholder="Enter the email"
                        name="email"
                        onChange={handleChange}
                        value={Data.email} />
                </div>
                <div className="form-group">
                    <label htmlFor="occupation"
                        className="form-label">Occupation</label>
                    <select className="form-select"
                        name="occupation"
                        onChange={handleChange}
                        value={Data.occupation}
                    >
                        <option>--select--</option>
                        <option value="student">Student</option>
                        <option value="employee">Employee</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div className="form-group">
                    <label htmlFor="gender"
                        className="form-label">Gender</label>
                    <div className="radio-group">
                        <div>
                            <input type="radio" name="gender"
                                value="male"
                                onChange={handleChange}
                                checked={Data.gender === 'male'} />
                            <label htmlFor="male">Male</label>
                        </div>
                        <div>
                            <input type="radio" name="gender"
                                value="female"
                                onChange={handleChange}
                                checked={Data.gender === 'female'} />
                            <label htmlFor="female">Female</label>
                        </div>
                        <div>
                            <input type="radio" name="gender"
                                value="other"
                                onChange={handleChange}
                                checked={Data.gender === 'other'} />
                            <label htmlFor="other">Other</label>
                        </div>
                    </div>
                </div>
 
                <div className="form-group">
                    <label htmlFor="gender"
                        className="form-label">Languages</label>
                    <div>
                        <div>
                            <input type="checkbox" name="languages"
                                value="html"
                                onChange={handleChange}
                                checked={Data.languages.indexOf('html') !== -1} />
                            <label htmlFor="html">HTML</label>
                        </div>
                        <div>
                            <input type="checkbox" name="languages"
                                value="css"
                                onChange={handleChange}
                                checked={Data.languages.indexOf('css') !== -1} />
                            <label htmlFor="css">CSS</label>
                        </div>
                        <div>
                            <input type="checkbox" name="languages"
                                value="javascript"
                                onChange={handleChange}
                                checked={Data.languages.indexOf('javascript') !== -1} />
                            <label htmlFor="javascript">Javascript</label>
                        </div>
                    </div>
                </div>
                <div className="form-group">
                    <button className="btn" type="submit" >Submit</button>
                </div>
            </form>
        </div>
    );
}
 
export default FormHandling;

Javascript

// App.js
import React from 'react';
import FormHandling from './FormHandling';
import './App.css'
 
function App() {
  return (
    <div className="component">
      <FormHandling />
    </div>
  );
}
 
export default App;

Javascript

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

CSS

/* FormHandling.css */
.form-container {
    width: 550px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
   
  .form-group {
    margin-bottom: 20px;
  }
   
  .form-label {
    display: block;
    margin-bottom: 5px;
  }
   
  .form-control,
  .form-select,
  .form-check input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
  }
   
  .form-check label {
    margin-left: 5px;
  }
   
  .btn {
    background-color: #4caf50;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
   
  .btn:hover {
    background-color: #45a049;
  }
  .radio-group {
    display: flex;
    gap: 10px;
  }
   
  .radio-group div {
    display: flex;
    align-items: center;
  }
   
  .radio-group input {
    margin-right: 5px;
  }

CSS

/*App.css*/
.component {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Output:

Javascript

Javascript

Javascript

CSS

CSS

Javascript

Javascript

Javascript

CSS

CSS

How to handle forms in React ?

Contact Us

Approach to handle forms in React

Javascript

Javascript

Javascript

CSS

CSS

Javascript

Javascript

Javascript

CSS

CSS

How to handle forms in React ?

Similar Reads

Contact Us