Controlled input field

OSCC · React, Components, Input · Nov 3, 2020

Renders a controlled <input> element that uses a callback function to inform its parent about value updates.

  • Use the value passed down from the parent as the controlled input field's value.
  • Use the onChange event to fire the onValueChange callback and send the new value to the parent.
  • The parent must update the input field's value prop in order for its value to change on user input.
const ControlledInput = ({ value, onValueChange, ...rest }) => {
  return (
    <input
      value={value}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};
const Form = () => {
  const [value, setValue] = React.useState('');

  return (
    <ControlledInput
      type="text"
      placeholder="Insert some text here..."
      value={value}
      onValueChange={setValue}
    />
  );
};

ReactDOM.render(<Form />, document.getElementById('root'));

Recommended snippets

  • Uncontrolled input field

    React, Components

    Renders an uncontrolled <input> element that uses a callback function to inform its parent about value updates.

  • Renders an uncontrolled <select> element that uses a callback function to pass its value to the parent component.

  • Uncontrolled range input

    React, Components

    Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.