Is there a way to disable the nested field name feature in react final form?

Question

Please see react final form's docs here

I'm working on a form which obviously is powered by react final form. In the form component, I'm fetching data from an API server and the response body includes something like the following:

{
  "configs": {
    "name": "abc",
    "display.name": "Abc",
    "value": 12,
    "read.only": true
  }
}

As we can see that there are four different key/value pairs in the configs. react final form can display values like name and value just fine but not values like display.name and read.only since they have a dot -> . in their key.

I know I can change these dots (.) with something like underscores and it will work. But the problem is that our backend devs are saying that using dots (.) to separate key names is very common in the backend so replacing dots with other separators won't be an option.

I'm currently replacing these separators with underscores in the frontend but that logic is everywhere and I think there should a better way to solve this. Thanks!

Answer 1

I think the answer is that Final Form just doesn't support keys with dots. Final Form needs some way to know when to go a level deeper into the form values object.

The only solution I could imagine would be to somehow tell Final Form to use another character (similar to how you can choose a different "divider" character when doing search-and-replace in VIM) as the "dot". So you could refer to your display name as <Field name="configs/display.name" delimiter="/"/>, but this feels like a pretty extreme edge case.

Longer term, I'd like to allow providing a type-safe get/set lens for each field, which would also solve this problem.

Wish I had better news for you... 😢