3 Practical Examples of Handling Form Submissions in React

Handling Form Submissions in React

Handling form submissions in React can be straightforward once you break it down into manageable parts. In this guide, we’ll explore three diverse examples that illustrate common use cases, ensuring you understand how to manage user input effectively. Let’s dive in!

Example 1: Simple Login Form

In this example, we’ll create a basic login form that captures a user’s email and password. This is a common use case where you might want to authenticate users before they access certain features of your app.

The form will display the entered values in the console when submitted.

import React, { useState } from 'react';

const LoginForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault(); // Prevent page refresh
        console.log(`Email: \({email}, Password: }\(password}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>Email:</label>
                <input 
                    type="email" 
                    value={email} 
                    onChange={(e) => setEmail(e.target.value)} 
                    required
                />
            </div>
            <div>
                <label>Password:</label>
                <input 
                    type="password" 
                    value={password} 
                    onChange={(e) => setPassword(e.target.value)} 
                    required
                />
            </div>
            <button type="submit">Login</button>
        </form>
    );
};

export default LoginForm;

Notes:

• The handleSubmit function prevents the default form submission behavior to stop the page from refreshing.
• The required attribute ensures the fields are not left empty.

Example 2: Feedback Form with Validation

This example demonstrates a feedback form that captures user comments. We’ll implement basic validation to ensure the comment isn’t too short, enhancing user experience.

import React, { useState } from 'react';

const FeedbackForm = () => {
    const [comment, setComment] = useState('');
    const [error, setError] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        if (comment.length < 10) {
            setError('Comment must be at least 10 characters long.');
        } else {
            setError('');
            console.log(`Feedback: ${comment}`);
            // Here you can send the comment to your API
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>Comment:</label>
                <textarea 
                    value={comment} 
                    onChange={(e) => setComment(e.target.value)} 
                    required
                />
            </div>
            {error && <p style={{ color: 'red' }}>{error}</p>}
            <button type="submit">Submit Feedback</button>
        </form>
    );
};

export default FeedbackForm;

Notes:

• The validation checks the length of the comment and updates the error state accordingly.
• Users receive immediate feedback if their input doesn’t meet the criteria.

Example 3: Dynamic Form with Multiple Inputs

In this example, we’ll create a dynamic form that allows users to add multiple items (like a shopping list). This showcases how to handle an array of inputs in React.

import React, { useState } from 'react';

const DynamicForm = () => {
    const [items, setItems] = useState(['']);

    const handleChange = (index, value) => {
        const newItems = [...items];
        newItems[index] = value;
        setItems(newItems);
    };

    const handleAddItem = () => {
        setItems([...items, '']); // Add a new empty string for a new input
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(`Items: ${items.filter(item => item).join(', ')}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            {items.map((item, index) => (
                <div key={index}>
                    <label>Item {index + 1}:</label>
                    <input 
                        type="text" 
                        value={item} 
                        onChange={(e) => handleChange(index, e.target.value)} 
                        required
                    />
                </div>
            ))}
            <button type="button" onClick={handleAddItem}>Add Item</button>
            <button type="submit">Submit</button>
        </form>
    );
};

export default DynamicForm;

Notes:

• Users can add multiple inputs dynamically, making it flexible for various scenarios.
• The filter method is used to ignore any empty strings in the submitted list.

These examples of handling form submissions in React provide a solid foundation for creating interactive user interfaces. Whether you’re building a simple login form or a dynamic input system, these patterns will help you manage forms effectively. Happy coding!