Basic form Handling

Basic form handling defines a state where the form data is held as input by the user.

Example

Here is an example of form handling using react hooks. We have a username state defind using useState hook and a function handleUsernameChange to handle the change in the username. Another useState is defind to check whether the form has been submitted or not. On successful form fillup, there is a handleSubmit function to submit the form. Comments are provided in the code for each and every possible lines of code for better understanding.

Javascript

// App.js
 
import React, { useState, useEffect } from 'react'; 
import './App.css'; 
 
function App() {
    const [username, setUsername] = useState(''); 
    const [submittedUsername, setSubmittedUsername] = useState('');
 
    const handleUsernameChange = (e) => {
        setUsername(e.target.value); 
        console.log({ "username": username })
    };
 
    const handleSubmit = (e) => {
        e.preventDefault(); 
        setSubmittedUsername(username);
    };
 
    useEffect(() => {
        if (submittedUsername) {
            alert(`Submitted username: ${submittedUsername}`);
        }
    }, [submittedUsername]); 
 
    return (
        <div className="container"> 
            <form onSubmit={handleSubmit} className="form"> 
                <label htmlFor="username" className="label">Username:</label> 
                <input
                    type="text"
                    id="username"
                    value={username}
                    onChange={handleUsernameChange}
                    className="input"
                    placeholder="Enter your username"
                />
                <button type="submit" className="button">Submit</button> 
            </form>
        </div>
    );
}
 
export default App;

CSS

/*App.css*/
 
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.form {
    width: 300px;
    padding: 20px;
    border-radius: 8px;
    background-color: #f0f0f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
 
.label {
    margin-bottom: 10px;
    display: block;
    font-size: 16px;
}
 
.input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
 
.button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}
 
.button:hover {
    background-color: #0056b3;
}

Output:

Run the following command to start the server

npm start

output example 1

Form Handling with React Hooks

Forms are an important part of web development. Form handling is a crucial user interaction for websites. React hooks provide a concise and very efficient way to handle the state of the form as the user interacts with the form fields. There are mainly two react hooks for this purpose.

useState:- useState hook is used to manage the current state of any input field in the context of form handling. useState is a very nice way to hold the data over the website till the time you want.
useEffect:– useEffect is used to perform side effects on the website. use effect can be used to trigger actions after successful form submission as shown in example one. useEffect can also be used in case the form requires additional data to be fetched from the server, such as options of the `select` form field.

In this article, we will learn how to efficiently manage forms using react hooks.

Tags:

#React-Hooks #ReactJS #Web Technologies

Steps to Create a React App

Approach 2: Dynamic Form Handling

Basic form Handling

Example

Javascript

CSS

Form Handling with React Hooks

Similar Reads

Contact Us