Builidng forms with ReactJS

Creating Forms with ReactJS

Posted by

The tutorial provides the usage of Forms in React Application, Forms control inputs, Forms using Controlled component in React, Forms using Uncontrolled component in React, Difference between controlled and uncontrolled component in React, Forms examples in React.

What is Forms in React ?

Forms are the control inputs like text fields, buttons, checkbox, radio button, etc to develop the front end for any web based application using React. The data captured in the React Forms is managed by the React Components and application operations can be performed.

Forms Type in React

The Forms can be classified in below given categories

  • Forms using Uncontrolled component: The data change is handled as the traditional HTML form inputs where the form change is handled by the DOM itself. The uncontrolled components requires the ref to read the values from the DOM structure.
  • Forms using Controlled component: The data change in the form is handled by the controlled components in React instead using the event-based callbacks of handled by DOM as the traditional approach which allows react to provide stateful and interactive approach. The state within the component is updated using the setState() method

Difference between Controlled Component Vs Uncontrolled Component

Controlled component in ReactUncontrolled Component in React
Controlled component maintain the stateUncontrolled component does not maintain state
Form data is handled by the Parent componentForm data is handled by the DOM itself
Retrieves the current value using propsRetrieves the current value using ref from the DOM
allows to perform validationsvalidations cannot be performed

Forms Example using uncontrolled component in React

import React, { Component } from 'react';
class App extends React.Component {
  constructor(props) {
      super(props);
      this.updateSubmit = this.updateSubmit.bind(this);
      this.input = React.createRef();
  }
  updateSubmit(event) {
      alert('User details are submiited using Forms - Uncontrolled Component...');
      event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.updateSubmit}>
        <h1>Forms Uncontrolled Component Example</h1>
        <label>Name:
            <input type="text" ref={this.input} />
        </label>
        <label>
            CompanyName:
            <input type="text" ref={this.input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
export default App;
Response for Forms Uncontrolled Component

Forms Example using controlled component in React

import React, { Component } from 'react';
class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        username: "Mohit",
        emailid: "mohitatgmaildotcom"
      };
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleInputChange = this.handleInputChange.bind(this);
    }
    handleInputChange(event) {
      const target = event.target;
      const value = target.name === 'username' ? target.checked : target.value;
      const name = target.name;
      this.setState({
        [username]: value
      });
    }
    handleSubmit(event) {
      alert('User informaiton is submitted successfully: ');
        event.preventDefault();
    }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <h1>Uncontrolled Form Example</h1>
        <label>Name:
            <input  name="username" type="text"  value={this.state.username} onChange={this.handleInputChange}/>
        </label>
        <label>
            Email Id:
            <input name="emailid" type="text" value={this.state.emailid}  onChange={this.handleInputChange}/>
        </label>
        <label>
            Job Type:
            <select name="jobtype" onChange={this.handleInputChange}>
              <option value="IT Enginner">IT Enginner</option>
              <option selected value="IT Architect">IT Architect</option>
              <option value="IT Manager">IT Manage</option>
              <option value="IT Director">IT Director</option>
            </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
export default App;