I've made a React project where I'm using i18n for localization. Translation works like it should, here is an example.

import React, { Suspense } from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation } from "react-i18next";

const translationSwe = {
about: "Information"
}

const translationEng = {
about: "About"
}

i18n.use(initReactI18next).init({
resources: {
swe: { translation: translationSwe },
eng: { translation: translationEng },
},
lng: "swe",
fallbackLng: "swe",
interpolation: { escapeValue: false },
});

const App = () => {
const { t } = useTranslation();

return(
<Suspense fallback="Loading..">
  <div className="app">
   <p>{t("about")}</p>
  </div>
</Suspense>
 );
};

I was just wondering, is there a way to add translated text without getting it from translationSwe & translatioEng? This doesn't work of course, but something like this was on my mind:

<p>{t(swe: "Information", eng: "About")}</p>

Hopefully you get the idea, please ask if not!