How to Create Controlled Component in React: Simple Guide

A controlled component in React is created by managing the input's value through React state and updating it with an onChange event handler. This way, React controls the input's value, making it easy to handle user input and form data.

Syntax

A controlled component uses React useState to hold the input value and an onChange handler to update that value. The input's value attribute is set to the state variable, so React controls what is shown.

• const [value, setValue] = useState(''): declares state for input value.
• value={value}: sets input's displayed value from state.
• onChange={e => setValue(e.target.value)}: updates state when user types.

jsx

import React, { useState } from 'react';

function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={e => setValue(e.target.value)}
      aria-label="Controlled input"
    />
  );
}

Output

An empty text input box that updates as you type, with React controlling its value.

Example

This example shows a controlled text input that updates a message below it as you type. The input's value is stored in React state and updated on every keystroke.

jsx

import React, { useState } from 'react';

export default function ControlledComponentExample() {
  const [name, setName] = useState('');

  return (
    <div>
      <label htmlFor="nameInput">Enter your name:</label>
      <input
        id="nameInput"
        type="text"
        value={name}
        onChange={e => setName(e.target.value)}
        aria-label="Name input"
      />
      <p>Hello, {name || 'stranger'}!</p>
    </div>
  );
}

Output

A text input labeled 'Enter your name:' and below it a greeting that updates to 'Hello, [typed name]!' as you type.

Common Pitfalls

Common mistakes when creating controlled components include:

• Not setting the value attribute, which makes the input uncontrolled.
• Forgetting to update state in onChange, so input appears frozen.
• Using defaultValue instead of value for controlled inputs.
• Not handling empty or initial state properly, causing warnings or unexpected behavior.

jsx

import React, { useState } from 'react';

// Wrong: input without value or onChange is uncontrolled
function WrongInput() {
  return <input type="text" />;
}

// Right: controlled input with state and onChange
function RightInput() {
  const [text, setText] = useState('');
  return <input type="text" value={text} onChange={e => setText(e.target.value)} />;
}

Output

WrongInput: input that user can type but React does not control value.
RightInput: input controlled by React state, updates as user types.

Quick Reference

Tips for controlled components:

• Always use value and onChange together.
• Initialize state to an empty string or suitable default.
• Use aria-label or label for accessibility.
• Update state with e.target.value inside onChange.
• Controlled inputs make form validation and submission easier.

Key Takeaways

Controlled components keep input value in React state for full control.

Use value and onChange props to sync input and state.

Always update state inside onChange to reflect user input.

Initialize state properly to avoid uncontrolled to controlled warnings.

Controlled inputs improve form handling and validation in React.