React Forms and State: A Deep Dive with Examples

Posted on Mar 30, 2025 in Computers

React Forms and State: A Deep Dive

Form Handling in React

Form handling in React involves controlling input fields and managing form submissions. React treats forms differently than regular HTML by using state to handle input values. There are two types of form components:

Controlled Components

The form’s input is controlled by React state.
Each input field’s value is bound to state, and updates happen through event handlers.

Example:

import React, { useState } from 'react';

function ControlledForm() {
  const [name, setName] = useState('');

  const handleChange = (e) => setName(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Submitted Name: ' + name);
  };

  return (
    
      
      Submit
    
  );
}

Uncontrolled Components

Input fields maintain their own state, and React accesses the value using refs.
More like traditional HTML form handling.

Example:

import React, { useRef } from 'react';

function UncontrolledForm() {
  const nameInput = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    alert('Submitted Name: ' + nameInput.current.value);
  };

  return (
    
      
      Submit
    
  );
}

Key Differences:

Controlled components use React state to handle form data, giving more control.
Uncontrolled components use native DOM access, making them simpler for quick forms but harder to manage in larger apps.

React State Explained

React State is an object that holds data for a component and determines its behavior. When state changes, React automatically re-renders the component to reflect the updated state in the UI.

In functional components, state is managed with the useState hook.
In class components, state is managed using this.state and updated with this.setState().

Example (Functional Component):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);

  return (

`Count: {count}`


Increment


);
}

Example (Class Component):

import React, { Component } from 'react';

class Counter extends Component {
  constructor() {
    super();
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (

`Count: {this.state.count}`


Increment


);
}
}

Why is State Important?

Allows dynamic updates to the UI without reloading the page.
Manages data flow within the component.
Improves modularity and readability by keeping UI and logic in sync.

Would you like to dive deeper into lifecycle methods, hooks, or see more examples? Let me know!

React Forms and State: A Deep Dive with Examples