Codecademy Logo

React Forms

Related learning

  • Free course

    Learn React: Additional Basics

    Take your React skills to the next level by learning how to apply styles and use forms to get user input.
    • Beginner Friendly.
      1 hour

Controlled vs. Uncontrolled Form Fields

In React, form fields are considered either uncontrolled, meaning they maintain their own state, or controlled, meaning that a parent component maintains their state and passes it to them to display. Usually, the form fields will be controlled.

The example code shows an uncontrolled input and a controlled input.

const uncontrolledInput = <input />;


const controlledInput = (
  <input value={stateValue} onChange={handleInputChange} />
);

Controlled Components

A controlled form element in React is built with a change handler function and a value attribute.

const controlledInput = (
  <input value={stateValue} onChange={handleInputChange} />
);

Learn more on Codecademy

  • Free course

    Learn React: Additional Basics

    Take your React skills to the next level by learning how to apply styles and use forms to get user input.
    • Beginner Friendly.
      1 hour
Previous