How do you handle pluralization correctly across different languages in an internationalized React app?

Different languages have very different rules for plurals, some with more than just a singular and plural form. Translation libraries like react i18next let you define separate translations for different count ranges, and automatically pick the correct one based on both the language and the actual number being displayed.

// translation file
{
  "item_one": "You have {{count}} item",
  "item_other": "You have {{count}} items"
}

function CartCount({ count }) {
  const { t } = useTranslation();
  return <p>{t('item', { count })}</p>;
}