React i18n 语言 object 映射

Question

How do I iterate through the menu object items with react i18n? Here is an extract from the translation.json file: The desired outcome is to use .map(items) loop to output translations with <ul><li></li></ul>

{
  "lang": "lv",
  "menu": {
    "index": "galvene",
    "food_menu": "menu",
    "about_us": "par mums",
    "delivery": "piegāde"
  }
}

App component, I wish to get the output in:

function App() {
    const { t, i18n } = useTranslation();
    const changeLanguage = (language) => {
        i18n.changeLanguage(language)
    };

  return (
      <div>
          /* The output should be here */
      </div>
  );
}

Answer 1

You can import the JSON file and then iterate the keys.

import translations from "./translation.json";


function App() {
    const { t, i18n } = useTranslation();
    const changeLanguage = (language) => {
        i18n.changeLanguage(language)
    };

  return (
      <div>
          <ul>
            {Object.keys(translations.menu).map((key) => (
              <li>{t(key)}</li>
            ))}
          </ul>
      </div>
  );
}