Learn how to handle forms in React with this beginner-friendly guide! 🚀 Discover the difference between Controlled and Uncontrolled Components, implement a practical React form example, and enhance your React skills. Perfect for beginners!

React JS || Mastering Forms in React

Forms are an essential part of any web application, allowing users to input data such as login credentials, sign-up details, or other information. In React JS, handling forms is slightly different compared to traditional HTML forms. In this React JS Tutorial - 15, we will learn how to effectively handle forms in React using controlled and uncontrolled components.

What Are Forms in React?

Forms in React allow users to interact with web applications by entering data. Unlike standard HTML forms, React provides a dynamic way to handle inputs using state management. There are two primary ways to handle forms in React:

1. Controlled Components

2. Uncontrolled Components

Controlled vs. Uncontrolled Components

React forms can be managed in two ways:

Controlled Components

Controlled components are those where form elements' values are managed by React state. Whenever a user types something, React updates the state accordingly. This method gives full control over the form data.

Example of a Controlled Component

import React, { useState } from 'react';
const ControlledForm = () => {
    const [name, setName] = useState('');
    const [email, setEmail] = useState('');
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(`Name: ${name}, Email: ${email}`);
        alert(`Submitted:\nName: ${name}\nEmail: ${email}`);
    };
    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
            </label>
            <label>
                Email:
                <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
};
export default ControlledForm;

Uncontrolled Components

Uncontrolled components do not use React state for form inputs. Instead, they use refs to access values directly from the DOM.

Example of an Uncontrolled Component

import React, { useRef } from 'react';
const UncontrolledForm = () => {
    const nameRef = useRef(null);
    const emailRef = useRef(null);
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(`Name: ${nameRef.current.value}, Email: ${emailRef.current.value}`);
    };
    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={nameRef} />
            </label>
            <label>
                Email:
                <input type="email" ref={emailRef} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
};
export default UncontrolledForm;

Which One Should You Use?

• Controlled Components: Recommended for most cases as they offer better control, validation, and debugging.

• Uncontrolled Components: Useful when working with third-party libraries or handling large forms where performance is a concern.

Styling the React Form

To improve the user experience, let’s add some CSS to our form.

.form-container {
    width: 320px;
    margin: auto;
    padding: 20px;
    border: 2px solid #ccc;
    border-radius: 8px;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}

h2 {
    text-align: center;
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 10px;
    font-weight: bold;
}

input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
    font-size: 16px;
    transition: 0.3s;
}

button:hover {
    background-color: #0056b3;
}

Conclusion

In this React JS Tutorial - 15, we explored how to handle React forms using controlled and uncontrolled components. Controlled components are the recommended approach since they allow better control over form data, whereas uncontrolled components can be useful in certain cases where direct DOM manipulation is required.

If you found this tutorial helpful, feel free to share it with fellow developers! 🚀 Stay tuned for more React JS tutorials!

Follow Us for More Updates:

🔗 Youtube: [To know more about the React Form, visit our Youtube Channel]
 

#ReactJSTutorial #ReactForms #ControlledComponents #UncontrolledComponents #ReactJS #WebDevelopment #LearnReact #ReactBeginner #FormsInReact 🚀