Bug: unable to set value on hidden input about react

[rothsandro]

The browser treats the value property different for inputs of type hidden vs others. If you set the value of a type=hidden input, it will not just update the value property but update the DOM attribute and therefore change the defaultValue. On re-render, React detects that the defaultValue is not up to date and changes it back to the value you provided as defaultValue. For other inputs, the browser does not update the DOM attribute, so defaultValue will not change.

As a workaround you can change the defaultValue:

defaultValue={hiddenFields.current["HIDDEN_TYPE_FIELD"]?.value ?? "Bob Ross"}

[JohnRDOrazio]

I also tried with the latest React 18.3.0, isn't fixed:

https://codesandbox.io/s/agitated-tharp-gxr7z2

[JohnRDOrazio]

Though a hidden input's value can't be changed by the end user, it should however be able to be changed by the app:

The element's value attribute holds a string that contains the hidden data you want to include when the form is submitted to the server. This specifically can't be edited or seen by the user via the user interface, although you could edit the value via browser developer tools.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden

And in fact it does still work in a React app, as long as the dom view isn't updated, see this example:
https://codesandbox.io/s/dreamy-chaum-ct8czg

Only if the dom view is updated, the value is not persisted.

[MeenuyD]

Hello, @JohnRDOrazio the ref local variable persists the data does not see on UI after re-rendering the components via the state variable.
In the code of code sandbox hidden inputs don't display their values directly on the page, but their values can be accessed programmatically. In this case, the updated values are correctly stored in the hiddenFields ref object, and when we click "Finalize," the finalizeForm function retrieves these values and updates the results state.

[JohnRDOrazio]

@MeenuyD I don't believe you have looked closely at the codesandbox examples I provided. The value of the hidden inputs are NOT persisted in the ref variable, if the dom view is refreshed.