The condition of the translations are not working correctly

[priscilawebdev]

Type: Bug

Version:" 2.0.0-alpha.4

Current behavior:
After we update to the version of intl-codegen we noticed that the error message of our form's fields were displaying "undefined" instead of the field's name. Then we realized that we should from now on, also define translations keys for the field's name and add them in the fieldNameIds object of a combine function. Something like:

 fieldNameIds: {
    name: 'fieldname-first-name',
    streetNumber: 'address-number',
    street: 'fieldname-street',
    zip: 'fieldname-zip',
    country: 'fieldname-country',
    city: 'fieldname-city',
    sports: 'fieldname-sports',
  },

ps: it could be nice to have a documentation about it 😉

The problem is that after doing everything right, the translations were still wrong. We believe it is because in the syntax of a translation the undefined is now a string and will always be true, displaying the wrong translation.

Expected behavior:
undefined should not be a string. Then the condition will work as expected and the translations will be displayed correctly

Please let me know if you really need a detailed description of how to reproduce the bug, but the code below should help:

React.createElement(Localized, {
      id: id as any,
      params: { field: fieldNameId, ...params },
    })

the value of the defined field must be displayed correctly. fieldNameId is a string

[treylon]

This special use case is more an internal core-io problem, although the probably incorrect interpretation of undefined values does belong here.

[Swatinem]

You have to manually String(…) your keys, which turns undefined into the string "undefined", which will then be correctly matched by intl-codegen.

[priscilawebdev]

ok if I do as you say than the conditional works.

export function mapIOErrorToLocalizedObject(error: IOError) {
  return error.errors.reduce(
    (previousValue, { path, id, params, fieldNameId }) => ({
      ...previousValue,
      [path[0]]: React.createElement(Localized, { id: id as any, params: { field: String(fieldNameId), ...params } }),
    }),
    {},
  )
}

The problem now is that even though I have a translation for the translation key, the translation is not being displayed correctly.

for instance:

[Swatinem]

oh haha, ofc, you have to actually pass the translated fieldname as field.

also please keep in mind that this project is public, so you shouldn’t ask internal questions here :-)