How to correctly display a list of languages

When displaying a list of languages for user selection, avoid the common mistake of showing language names in the currently selected language.

For instance, if the current language is English and your website supports English, German, Japanese, and French, it's incorrect to show the list like this:

Instead, show the language names in their native languages. For example:

This way, those who don't speak the current language will still be able to select the language they want.

To achieve this, you don't need to hard code the language names by hand. Simply use JavaScript's built-in Intl.DisplayNames API. For example:

const languages = ['en', 'de', 'ja', 'fr'].map((l) => {
  return {
    value: l,
    label: new Intl.DisplayNames([l], { type: 'language' }).of(l),
  }
})

So neat.

By the way, I'm making a book about Pull Requests Best Practices. Check it out!