How to create a form in React.js

Posted on by

In React.js, handling forms involves managing form input values, handling form submission, and performing validation. Here’s a basic guide on how to handle forms in React:

  1. Controlled Components:
  • In React, form input elements like <input>, <textarea>, and <select> are called controlled components. Their values are controlled by React state.
  • You need to set the value attribute of the form elements to the corresponding state value and provide an onChange event handler to update the state when the user interacts with the form elements.
  1. State Setup:
  • Initialize state variables to store form input values.
  • Use React’s useState hook to manage state in functional components or the this.state object in class components.
  1. Event Handlers:
  • Define event handler functions to update the state when form inputs change (onChange) and handle form submission (onSubmit).
  • These event handlers should update the state with the new input values.
  1. Form Submission:
  • Handle form submission by preventing the default form submission behavior (event.preventDefault()) and implementing custom submission logic.
  • Access the form input values from state and send them to the server or perform any necessary actions.
  1. Form Validation:
  • Implement form validation to ensure that the user inputs are valid before submission.
  • Validate input values in the onChange event handler or before form submission.
  • Provide feedback to the user about validation errors and prevent form submission if there are any invalid inputs.

Here’s an example of form handling in a functional component using controlled components and React hooks:

import React, { useState } from 'react';

function MyForm() {
    const [formData, setFormData] = useState({
        username: '',
        email: ''
    });

    const handleChange = (event) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        // Perform form submission logic here
        console.log('Form submitted:', formData);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="username"
                value={formData.username}
                onChange={handleChange}
                placeholder="Username"
            />
            <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleChange}
                placeholder="Email"
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default MyForm;

In this example, we have a form with input fields for username and email. The form values are stored in state (formData) and updated whenever the user types in the input fields. When the form is submitted, the handleSubmit function is called, which prevents the default form submission behavior and logs the form data to the console.

This is a basic example, and you can expand on it by adding more form fields, validation logic, and handling form submission with asynchronous actions such as API requests.