ReactJS | forms

Forms are really important in any website for login, signup or whatever. It is easy to make a form but forms in React work a little different. If you make a simple form in React it works, but it’s good to add some JavaScript code to our form so that it can handle the form submission and retrieve data that the user entered. To do this we use controlled components.

Controlled Components: In simple HTML elements like input tag, the value of the input field is changed whenever the user type. But, In React, whatever the value user types we save it in state and pass the same value to the input tag as its value, so here its value is not changed by DOM, it is controlled by react state. This may sound complicated But let’s understand with an example.

filter_none

edit
close

play_arrow

link
brightness_4
code

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'));

chevron_right




In the above example, the input element is uncontrolled whatever the value user type is in the DOM. We are logging that value on the console by getting it from the DOM and the method onInputChange will be called any time user type in anything so the value will be printed on the console every time (Ctrl + Shift + F11) google chrome user to open the console.

React is used to handle the value of user enters.

filter_none

edit
close

play_arrow

link
brightness_4
code

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'));

chevron_right


What will happening in the above react example, when we have made inputValue state with value null, and the value of that state is provided to the input field which means whatever the value of the inputValue is we will see it in the input box. And we are updating the value of inputValue each time user changing the value in the input by calling setState() function and dom is re-rendering because we are changing the value of inputValue using setState(). Here, we can easily get the value whatever user type in the input field and pass it to wherever we want from React state. The same happens with other elements like the text area and select. Here is another example that prevents the browser from automatically submitting the form.

filter_none

edit
close

play_arrow

link
brightness_4
code

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'));

chevron_right


Here we just add onSubmit event handler which calls the function onFormSumbit and performs the action of replacing the value of inputValue to ‘Hello World!’, and the preventDefault() function is used to prevent the browser from submitting the form and reloading the page.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.