iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Setting input.value = 'x' changes the input element in the browser, but it does not update the React state that controls the field. React can therefore render the state’s old value back into the input. To fill a controlled field from your application, update the state that supplies its value prop. Use defaultValue when you need only an initial value and want the input to remain uncontrolled.
Why doesn’t input.value = 'x' fill a React form?
A controlled input gets its displayed value from a React prop, usually a state variable. For example, with <input value={name} />, React treats name as the source of the rendered value. Assigning input.value = 'x' changes the DOM element, not name. When React renders again, it can put the value from name back into the field.
The DOM element and React state are separate parts of the data flow. A direct DOM assignment does not notify the component that its state should change.
How do I programmatically set a controlled React input?
For a change initiated by your application, call the state setter that supplies the input’s value prop:
#1 Best Overall
function NameField() {
const [name, setName] = useState('');
return (
<>
<input
value={name}
onChange={event => setName(event.target.value)}
/>
<button type="button" onClick={() => setName('x')}>
Fill
</button>
</>
);
}The button changes the same state variable that controls the field, so React renders x into the input. This is the documented React pattern for controlled inputs: provide a value, handle edits with onChange, and update the backing state.
How should user edits update the field?
Update the backing state synchronously in the onChange handler, using the value from the event:
<input
value={name}
onChange={event => setName(event.target.value)}
/>React’s input documentation says every controlled input needs an onChange handler that synchronously updates its backing value. It warns that if a state variable supplies value but the handler does not update that state synchronously, React will revert the input after each keystroke. Delaying the update or transforming the value in the handler can also cause the displayed value or caret position to behave unexpectedly.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallWhen should I use defaultValue instead?
Use defaultValue when you want to provide an initial value but do not need React state to control the field as the user edits it:
<input defaultValue="x" />defaultValue sets the starting value; it does not keep the live DOM value synchronized with React state. Choose between controlled and uncontrolled behavior based on whether the component needs to own the current value in state. Do not switch an input between uncontrolled and controlled during its lifetime.
Quick Recap
Best Value
What about missing values, checkboxes, and scripts?
- Text inputs: Keep a controlled value a string throughout the component’s lifetime. If data may be absent, initialize it to
''or use a fallback such asvalue={someValue ?? ''}. - Checkboxes and radios: Control whether they are selected with
checked, and readevent.target.checkedinonChange. Thevalueprop is not the checked state. - Automation and scripts: Changing a DOM property and dispatching a synthetic event is not equivalent to updating React state. React’s documentation does not define a universal native-setter recipe as a stable API. React issue reports discuss input tracking and event ordering, but they are historical implementation context, not a guarantee about every version or application: issue #12643 and issue #19389.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
