Open In App

React Forms

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Forms in React JS are really important for login, signup, or user interaction to the web page. In HTML the form data is usually handled by the DOM itself but in the case of React Forms data is handled by the react components.

React Forms

In React Forms, all the form data is stored in the React’s component state, so it can handle the form submission and retrieve data that the user entered. To do this we use controlled components.

React forms are used to interact with the user and provides additional functionality such as preventing the default behavior of the form which refreshes the browser after the form is submitted.

React Form Syntax

<form action={handleSubmit}>
<label>
User name:
<input type="text" name="username" />
</label>
<input type="submit" value="Submit" />
</form>

Controlled Components

In simple HTML elements like input tags, the value of the input field is changed whenever the user type. But, In React, whatever the value the user types we save it in state and pass the same value to the input tag as its value, so here DOM does not change its value, it is controlled by react state. These are known as Controlled Components.

This may sound complicated But let’s understand with an example.

Adding Forms in React

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

React Forms Text Input 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:

React Form Example Output

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.

React Form Handling 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.

React Forms Submission 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:

Multiple Input Fields

React Forms allow 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.

React Form Textarea Syntax:

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

Here,

  • 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.

React Form Select Syntax:

<select value={this.state.value} onChange={this.handleChange}>
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
<option value="React">React</option>
</select>

Here,

  • 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 demostrate handling multiple input fields in a single Form component.

Javascript




import React from "react";
// import ReactDOM from 'react-dom/client';
import "./index.css";
// 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: "abc@gfg.org",
        });
    };
 
    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>
);


Output:

Handling Multiple Input Example Output

Alternatives to Controlled Components:

Controlled components are commonly used to manage form state by binding form elements to React state. The alternative to controlled components is uncontrolled components. In uncontrolled components, instead of managing the form data through React state, you let the DOM handle the form elements and directly interact with them. To know more difference check this aticle on Controlled vs Uncontrolled Components in ReactJS.



Last Updated : 21 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads