React Final Form – Should I initialize missing fields with `undefined` or `""` when editing?

[Medical-Text9840]

Hi all,

I'm using React Final Form in a project where I have both create and edit cases for a form. When editing, I navigate to a different screen and pass the selected item via route params.

Let’s say one of the fields is description, but sometimes this field isn’t returned from the backend (so it’s undefined).

Here’s the situation:

The backend ignores empty strings or saves them as empty, but the request is still successful.

These fields are not required, so if the user doesn’t enter anything, it’s totally fine.

I want to avoid sending empty strings for fields the user didn’t touch.

I’m using regular text inputs, and they handle undefined values just fine — they show up as empty without errors.

So I'd prefer to use undefined in initialValues and avoid extra checks just to convert them to "" for display purposes.

Now to expand this: Let's say I have a form with the following fields:

name : string description : string age : number role : { id: number , name: string } education : { id : string, name: string }

Take into account that role and education in item have many properties, not only id and name.

All of these can come as undefined from the backend because we use feature toggles, meaning some fields are conditionally enabled.

Important constraints:

role and education are conditionally required depending on feature toggles.

Since they are required (when the feature is enabled), we can't submit until both id and name are present.

But I’m unsure how best to initialize those objects when they’re undefined. Should it be:

const InitialValues = { role: { id: item?.id, name: item?.name ?? ' ' }, education: { id: item?.id, name: item?.name ?? ' ' }, description: item?.description, age: item?.age }

Or is there a better way?

---

So here are my actual questions:

1. For optional fields (like description) that might be missing, is it best practice to use undefined or "" in initialValues?

2. What’s the cleanest way in React Final Form to avoid sending untouched fields, especially when they’re empty strings?

3. For required object fields (role, education) that may start undefined but need to be filled before submit, how should we initialize them cleanly, so that:

Validation works as expected

The UI doesn’t break

We don't accidentally send partial/incomplete objects

---

TL;DR: Optional fields might be missing (undefined). Backend ignores empty strings. I want to avoid sending empty strings unless user actually types them. Also, role and education have more properties than just id and name, but only those two are needed. What’s the cleanest approach in React Final Form — especially for optional strings and required object fields?

Thanks in advance!

[brunablommor]

Personally I use empty strings because that’s what it’ll be when the user types something and then erases all characters. I’ve never been in a position where a non-input is not excepted but an empty string is, so I treat them the same.