• App Logo
Python
Typescript
Java
Angular
VueJs
ReactJS
NodeJS
C
ExpressJS
HTML
CSS
Javascript
SQL
MongoDB
MySQL
Python
Typescript
Java
Angular
VueJs
ReactJS
NodeJS
C
ExpressJS
HTML
CSS
Javascript
SQL
MongoDB
MySQL
Python
Typescript
Java
Angular
VueJs
ReactJS
NodeJS
C
ExpressJS
HTML
CSS
Javascript
SQL
MongoDB
MySQL

React Tutorial

  • Home
  • Introduction
  • Get Started
  • Upgrade Version
  • JSX (Javascript Extension)
  • JSX Rendering in React
  • Components
  • React Classes
  • React Props
  • React Events
  • React Conditionals
  • React Lists
  • React Forms
  • React Memo

React Hooks

  • Hooks Introduction
  • useState
  • useEffect
  • useContext
  • useRef
  • useReducer
  • useCallback
  • useMemo

Forms Submission In React

In React, forms are a crucial part of building interactive user interfaces.

Managing form data and handling form submissions involves using React state and event handling.

Controlled Component in React:

In React, a controlled component is a form element whose value is controlled by the React state. We maintain the form data in the component's state, and React handles the input changes through state updates.

Handling Input Changes:

Example:

import React, { useState } from 'react';

const YourFormComponent = () => {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  });

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission using formData
    console.log('Form submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" name="username" 
          value={formData.username} onChange={handleInputChange} />
      </label>
      <br />
      <label>
        Password:
        <input type="password" name="password" 
          value={formData.password} onChange={handleInputChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default YourFormComponent;

Handling Checkbox and Radio Button:

Example:

import React, { useState } from 'react';

const YourCheckboxAndRadioForm = () => {
  const [formData, setFormData] = useState({
    rememberMe: false,
    gender: '',
  });

  const handleInputChange = (event) => {
    const { name, value, type, checked } = event.target;
    
    setFormData({
      ...formData,
      [name]: type === 'checkbox' ? checked : value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission using formData
    console.log('Form submitted:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Remember me:
        <input type="checkbox" name="rememberMe" 
          checked={formData.rememberMe} 
          onChange={handleInputChange} />
      </label>
      <br />
      <label>
        Gender:
        <label>
          <input type="radio" name="gender" 
            value="male" checked={formData.gender === 'male'} 
            onChange={handleInputChange} />
          Male
        </label>
        <label>
          <input type="radio" name="gender" 
            value="female" checked={formData.gender === 'female'}
            onChange={handleInputChange} />
          Female
        </label>
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default YourCheckboxAndRadioForm;

Uncontrolled Component In React:

In React, an uncontrolled component is a form element whose value is not controlled by the React state. Instead, we can use `React Refs` to interact with the DOM directly.

Handling Uncontrolled Components:

Example:

import React, { useRef } from 'react';

const YourUncontrolledForm = () => {
  const usernameRef = useRef(null);
  const passwordRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    // Access form values directly using refs
    console.log('Form submitted:', 
    usernameRef.current.value, passwordRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input type="text" ref={usernameRef} />
      </label>
      <br />
      <label>
        Password:
        <input type="password" ref={passwordRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
};

export default YourUncontrolledForm;

References for other Libraries to Handle Forms

References Link:

 React Hook Form Official Website: https://react-hook-form.com/


 Formik Official Website: https://formik.org/
<-- React Lists
React Memo -->
App Logo

Instanests provide web applications development tutorials in structured and organised manner. Explore our extensive collection of tutorials accessible for everyone. we can't warrant for correctness of all content. we constantly review our content and update to prevent from errors.

you agree to have read and accepted our Terms and Conditions and Privacy Policy.

Tutorials

Python Tutorial
Typescript Tutorial
Java Tutorial
C Tutorial
Javascript Tutorial
React.js Tutorial
Node.js Tutorial
Express.js Tutorial
HTML Tutorial
CSS Tutorial
Vue.js Tutorial
Angular Tutorial
MySQL Tutorial
MongoDB Tutorial
SQL Tutorial

Website

Contact Us
About Us
Terms and Conditions
Privacy Policy
App Logo

Instanests provide web applications development tutorials in structured and organised manner. Explore our extensive collection of tutorials accessible for everyone. we can't warrant for correctness of all content. we constantly review our content and update to prevent from errors.

you agree to have read and accepted our Terms and Conditions and Privacy Policy.