Uncontrolled input field

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

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

• Use the defaultValue passed down from the parent as the uncontrolled input field's initial value.
• Use the onChange event to fire the onValueChange callback and send the new value to the parent.

const UncontrolledInput = ({ defaultValue, onValueChange, ...rest }) => {
  return (
    <input
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

ReactDOM.render(
  <UncontrolledInput
    type="text"
    placeholder="Insert some text here..."
    onValueChange={console.log}
  />,
  document.getElementById('root')
);

Recommended snippets

• Controlled input field

  React, Components

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

• Uncontrolled select element

  React, Components

  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.