react-final-form state does not contains empty inputs

Question

I would like to have empty/null properties inside the state when user is deleting the content from an input.

If you see on the example the state is empty when user is clearing the input. I use the state to update data on database, so when the code updates the old data with new one the value is not updated (there is no property!).

Example: https://codesandbox.io/s/3qvqnv6216

I cannot find any smart way to leave the property inside the state.

Thanks :)

Lucan

Answer 1

Try this:

<Field
  name="myfield"
  component="input"
  type="text"
  allowNull                                      // <-------
  parse={value => (value === "" ? null : value)} // <-------
/>

Petrochemical

thanks, it works, I cannot understand why there isn't an option for this :| – Lucan

As the author of the library states here the reason can be found in the library's FAQ. – Quesenberry

Great solution, took me almost one day of searching for a solution. – Cadency