React Introduction

React Forms

Last Updated : 12 Aug, 2025

In React, forms are used to take input from users, like text, numbers, or selections. They work just like HTML forms but are often controlled by React state so you can easily track and update the input values.

Example:

JavaScript

import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Hello, ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Output:

Screenshot-from-2025-08-12-11-03-32

Adding Forms in React

Forms in React can be easily added as a simple react element. Here are some examples.

Example: This example displays the text input value on the console window when the React onChange event triggers.

JavaScript

// Filename - src/index.js: 

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {

    onInputChange(event)
    {
        console.log(event.target.value);
    }

    render()
    {
        return (<div><form><label>Enter text<
                /label>
                    <input type="text"
                        onChange={this.onInputChange}/>
                </form>
            </div>);
    }
}

ReactDOM.render(<App />, document.querySelector("#root"));

Output:

Adding Forms in React

Handling React Forms

In HTML the HTML DOM handles the input data but in react the values are stored in state variable and form data is handled by the components.

Example: This example shows updating the value of inputValue each time user changes the value in the input field by calling the setState() function.

JavaScript

// Filename - index.js

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {

    state = {inputValue : ""};

    render()
    {
        return (
            <div><form><label>Enter text<
                /label>
                    <input type="text"
                        value={this.state.inputValue}
                        onChange={(e) => this.setState(
                            { inputValue: e.target.value })} />
            </form>
                <br />
            <div>Entered Value:
                {this.state
                     .inputValue}</div>
            </div>);
    }
}

ReactDOM.render(<App />, document.querySelector("#root"));

Output

Submitting React Forms

The submit action in React form is done by using the event handler onSubmit which accepts the submit function.

Example: Here we just added the React onSubmit event handler which calls the function onFormSubmit and it prevents the browser from submitting the form and reloading the page and changing the input and output value to 'Hello World!'.

JavaScript

// Filename - index.js

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
    state = {inputValue : ""};

    onFormSubmit = (event) => {
        event.preventDefault();
        this.setState({inputValue : "Hello World!"});
    };

    render()
    {
        return (
            <div><form onSubmit = {this.onFormSubmit}>
            <label>Enter text<
                /label>
                    <input
                        type="text"
                        value={this.state.inputValue}
                        onChange={(e) =>
                            this.setState({
                                inputValue: e.target.value,
                            })
                        }
                    />
            </form>
                <br />
            <div>Entered Value:
                {this.state
                     .inputValue}</div>
            </div>);
    }
}

ReactDOM.render(<App />, document.querySelector("#root"));

Output

Submitting React Forms

Multiple Input Fields

It allows to handle multiple inputs in a single form. Other types of input fields present in Forms are

Textarea

The textarea tag defines the element by its children i.e., enclosed in the tags. In React we use the value prop instead.

Syntax:

<textarea value={text} onChange={handleChange} />

In the above syntax:

text: refers to the state variable in which the value is stored
handleChange: is the function to be executed to update the state when the onChange event triggers.

Select

The select tag defines the element by its children i.e., enclosed in the tags. In React similar to text.area we use the value prop instead.

Syntax:

<select>
    <option>
    </option>
    ...
</select>

In the above syntax

this.state.value: refers to the state variable in which the value is stored
this.handleChange: is the function to be executed to update the state when the onChange event triggers.

Multiple Input Fields

Example: This example demonstrate handling multiple input fields in a single Form component.

JavaScript

// import ReactDOM from 'react-dom/client';
import "./index.css";

import React from "react";
// import App from './App';
// import reportWebVitals from './reportWebVitals';

// Filename - index.js

import ReactDOM from "react-dom";

class App extends React.Component {
    state = {username : "", email: ""};

    onFormSubmit = (event) => {
        event.preventDefault();
        this.setState({
            username : "gfg123",
            email : "[email protected]",
        });
    };

    render()
    {
        return (
            <div
                style={{
            margin: "auto", marginTop: "20px",
                textAlign: "center",
                }}
            >
                <form onSubmit={this.onFormSubmit}>
                    <label> Enter username: </label>
                    <input
                        type="text"
                        value={this.state.username}
                        onChange={(e) =>
                            this.setState((prev) => ({
                                ...prev,
                                username: e.target.value,
                            }))
                        }
                    />
                    <br />
                    <br />
                    <label>Enter Email Id:</label>
                    <input
                        type="email"
                        value={this.state.email}
                        onChange={(e) =>
                            this.setState((prev) => ({
                                ...prev,
                                email: e.target.value,
                            }))
                        }
                    ></input>
                    <br />
                    <br />
                    <input type="submit" value={
            "Submit"} />
                </form>
                <br />
                <div>
                    Entered Value: {this.state.username}
                </div>
            </div>
        );
    }
}
const root
    = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Controlled Vs UnControlled Components

Feature	Controlled Components	UnControlled Components
Data Source	React state	DOM(internal State)
Value Binding	value prop bound to state	No binding value uses default value
How to Access Value	From state Variable	Via ref or document.querySelector
State Management	Managed by React	Managed by DOM
Real Time Validation	Easy to implement (validation on `onChange`)	Harder, needs manual checks
Re-rendering	Harder, needs manual checks	Fewer re-renders
Ease of Debugging	Easier to debug and test	Slightly harder to debug
Use Case	When you need to track and control user input	For quick/simple forms where state tracking isn’t needed

controlled_vs_uncontrolled_components — Comparison between controlled components vs un controlled components

Note: It clearly shows that controlled components generally score higher in areas like data source, value binding, and validation. Uncontrolled components perform slightly better in fewer areas such as re-rendering and ease of debugging.

React Forms in React

React Introduction

I

iamsahil1910

Improve

Article Tags :

Similar Reads

React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version

React Lifecycle

In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo