Sort formatted messages and render them in the correct order

[imageck]

Imagine there's a select control with a dozen of options, which in turn are mapped over sequentially like so:

{options.map(option => (
  <option key={option} value={option}>
    {intl.formatMessage({ defaultMessage: `{option, select,
      after {After}
      before {Before}
      cancel {Cancel}
      destroy {Destroy}
      eclipse {Eclipse}
      other {Etc.}
    }`}, { option })}
 </option>
)}

Let's assume that the options are sorted initially, i.e. ["after", ..., "eclipse"]. This order will be preserved in English but not in other locales. It turns into a problem if the options are supposed to be sorted alphabetically regardless of the locale.

To solve it, there could be another component that retrieves the options and their translations, sorts the formatted messages and then returns an array of option elements ready for rendering. However, I'm not exactly sure how that can be achieved.

What are your suggestions and solutions? How would you tackle this problem?

I'm interested to know your thoughts.

[longlho]

Please don't use select as a shorthand switch statement. It is reserved primarily for gender choices. In your case you should just programmatically pick the right string outside of MessageFormat and order them however you like.

[imageck]

Hi, @longlho. Thank you for joining the discussion!

Please don't use select as a shorthand switch statement. It is reserved primarily for gender choices.

Oh, really? I didn't know that. I thought it could be used just like a switch statement. At least the documentation implies that.

In your case you should just programmatically pick the right string outside of MessageFormat and order them however you like.

By that, you probably mean using defineMessages(), right? Do you happen to have an example of such a construct?

[imageck]

Ok, I settled on an array of key–value objects, which I first sort and then map through to render. The structure looks like so:

const categories = [
  {
    key: "books",
    value: intl.formatMessage({
      id: "category.books",
      defaultMessage: "Books"
    })
  },
  ...
].sort((a, b) => a.value < b.value ? -1 : a.value > b.value ? 1 : 0);