How are forms created in ReactJS ?

Form is a document that stores information of a user on a web server using interactive controls. A form contains different kinds of information such as username, password, contact number, email ID, etc. Creating a form in React is almost similar to that of HTML if we keep it simple and just make a static form.

Prerequisites:

• Nodejs and NPM
• React JS
• React Forms

Steps to Create React Application:

Step1: Create a React application using the following command:

npx create-react-app name_of_the_app

Step 2: After creating the react application move to the directory as per your app name using the following command:

cd name_of_the_app

Project Structure:

package.json:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom":"^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Example 1: In this example, We are going to create a simple form component inside the App component of the App.js file. This is just a static form and it does not contain any sort of dynamic handling and processing of events so this form is a basic form and do not satisfy our requirement.

Javascript

import React from 'react';
import './App.css';

function App() {

    return (
        <div className='App'>
            <div>
                <label>Input</label>
                <input type='text' />
            </div>
            <div>
                <label>Textarea</label>
                <textarea rows='5'></textarea>
            </div>
            <div>
                <button>Submit</button>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: In this example, we are going to print the value inside the input box into the console log. To reach this we have to do the following:

• Create a new function named ‘detectChange’ . This function will print the value of the target JSX element.
• Call this function at ‘onChange’ event.
• This is going to print the value of the input box whenever it is changed.

Javascript

import React from 'react';
import './App.css';

function App() {

    function detectChange(e) {
        console.log(e.target.value)
    }

    return (
        <div className='App'>
            <div>
                <label>Input :</label>
                <input type='text' onChange={detectChange} />
            </div>
            <div>
                <button>Submit</button>
            </div>
        </div>
    );
}

export default App;

Output:

Example 3: In this example,  we will be rendering the value inside the input box to another DOM element inside the same component using react state. Inside the App component of App.js

• Make an inputValue state with the value of an empty string.
• Set the value attribute of the input box equal to the inputValue state..
• Update the inputValue state using setState() method whenever a change occurs inside the input box.
• Set the text after ‘Entered Value :’ equal to inputValue state.

Javascript

import React from 'react';
class App extends React.Component {

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

export default App;

Output: