Change field name dynamically?

[fappaz]

I have a form (codesandbox here) with 2 components:

• A select input for the language (e.g.: English, Spanish)
• A textfield for the user to enter the text in the selected language

My default form data looks like this:

{
  "greeting": {
    "en-US": "Hello",
    "es-ES": "Hola"
  }
}

My initial idea was to have a single textfield, and just change its registered name based on the language selected.

I was expecting react-hook-form to update the correct prop in the form object - i.e.: if I select es-ES and enter a text, it should update the es-ES prop - , but that isn't happening. If you play with the codesandbox, you'll notice that while the field name is being updated correctly when the language is changed, its value is "out of sync" with the form data, like it's not pulling the correct value from the state.

Hence my question: is this the expected behaviour of this library? If so, how would you approach this UI instead?

[fappaz]

A solution was provided on stackoverflow.

Adding key={fieldName} to the Controller will re-render the input when the language is changed, making RHF re-register the right name.