title: reacti18next: Translation key names are shown but not values
body: <p>This is the first time I am using localization for my project and I was overwhelmed by the number of options present in it. When I try to use the translations by using {t(&quot;parentBody&quot;)} in my JSX it is getting rendered in the browser as-is &quot;parentBody&quot;. It is NOT loading the translation (values from the JSON file). I am expecting it to be rendered as value &quot;This is the Parent Body&quot; but instead I see only &quot;parentBody&quot;.</p>
  <p>I have done the following in my react app in order to localize. Can someone help me with this translations hook, its not loading the translations.</p>
  <p><strong>Following are the details about my libraries used:</strong></p>
  <pre><code>react: ^17.0.2,
  react-dom: ^17.0.2,
  i18next : ^21.6.10,
  i18next-http-backend: ^1.3.2,
  react-i18next: ^11.15.3,
  typescript: ^4.5.4,
  </code></pre>
  <p>This is what I am trying to do:</p>
  <p><strong>src/index.tsx</strong></p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  import './i18n';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  // If you want to start measuring performance in your app, pass a function
  // to log results (for example: reportWebVitals(console.log))
  // or send to an analytics endpoint.
  reportWebVitals();
  </code></pre>
  <p><strong>src/react-i18next.d.ts:</strong></p>
  <pre><code>import 'react-i18next';
  import en from './locales/en/translation.json';
  import ta from './locales/ta/translation.json';
  
  declare module 'react-i18next' {
    interface CustomTypeOptions  {
      defaultNS: 'ns1';
      resources: {
            en: typeof en;
            ta: typeof ta;
      };
    };
  };
  </code></pre>
  <p><strong>src/i18n.tsx</strong></p>
  <pre><code>import i18n from &quot;i18next&quot;;
  import { initReactI18next } from &quot;react-i18next&quot;;
  import translationEN from './locales/en/translation.json';
  import translationTA from './locales/ta/translation.json';
  import Backend from 'i18next-http-backend';
  export const defaultNS = 'ns1'
  
  
  export const resources = {
      en : {translation : translationEN},
      ta : {translation : translationTA},
  } as const;
  
  export const availableLanguages = Object.keys(resources);
  
  i18n
      .use(initReactI18next)
      .init({
          resources,
          lng:  &quot;en&quot;,
          fallbackLng : &quot;en&quot;,
          ns: ['ns1'],
          defaultNS,
          interpolation : {escapeValue : false},
          react: {
            useSuspense: false,
          },
      });
  
  export default i18n;
  </code></pre>
  <p><strong>src/App.tsx</strong></p>
  <pre><code>import './App.css';
  import React,{ useContext, Suspense} from 'react';
  import AllTabs from './components/AllTabs';
  import CssBaseline from &quot;@material-ui/core/CssBaseline&quot;;
  import { ThemeProvider, createTheme  } from &quot;@material-ui/core/styles&quot;;
  import { createStyles, alpha, Theme, makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Toolbar from '@material-ui/core/Toolbar';
  import IconButton from '@material-ui/core/IconButton';
  import Typography from '@material-ui/core/Typography';
  import InputBase from '@material-ui/core/InputBase';
  import Badge from '@material-ui/core/Badge';
  import MenuItem from '@material-ui/core/MenuItem';
  import Menu from '@material-ui/core/Menu';
  import MenuIcon from '@material-ui/icons/Menu';
  import FormControl from '@material-ui/core/FormControl';
  import Select from '@material-ui/core/Select';
  import InputLabel from '@material-ui/core/InputLabel';
  
  import { useTranslation } from 'react-i18next';
  import {availableLanguages} from &quot;./i18n&quot;;
  
  const themeDark = createTheme({
      palette: {
          background: {
              default: &quot;#222222&quot;
          },
          text: {
              primary: &quot;#ffffff&quot;
          }
      }
  });
  
  const useStyles = makeStyles((theme: Theme) =&gt; ({
    grow: {
      flexGrow: 1,
    },
    logo: {
      maxWidth: 160,
      marginRight: theme.spacing(10),
    },
    
    formControl: {
      margin: theme.spacing(1),
      minWidth: 10,
      width: 150,
      marginLeft: 20,
    },
    select: {
      &quot;&amp; ul&quot;: {
          backgroundColor: &quot;#cccccc&quot;,
          color: &quot;#333333&quot;,
      },
      &quot;&amp; li&quot;: {
          fontSize: 12,
      },
    },
  }));
  
  export const LanguageContext = React.createContext(&quot;en&quot;);
  
  function App() {
    const {t, i18n} = useTranslation();
    
    const [language,setLanguage] = React.useState(&quot;en&quot;);
  
  
    const handleLanguageChange = (event: React.ChangeEvent&lt;{ value: unknown }&gt;) =&gt; {
      event.preventDefault();
      setLanguage(event.target.value as string);
      i18n.changeLanguage(event.target.value as string);
    };
  
    return (
     &lt;Suspense fallback=&quot;&lt;div&gt;loading...&lt;/div&gt;&quot;&gt;
     &lt;ThemeProvider theme={themeDark}&gt;
       &lt;CssBaseline/&gt;
          &lt;div className={`App`}&gt;
              &lt;div className={classes.grow}&gt;
                &lt;AppBar position=&quot;static&quot;&gt;
                  &lt;Toolbar&gt;
                    &lt;Typography className={classes.title} variant=&quot;h6&quot; noWrap&gt;
                      {t(&quot;parentBody&quot;)}
                    &lt;/Typography&gt;                  
                    &lt;FormControl className={classes.formControl} variant={variantType} size=&quot;small&quot;&gt;
                      &lt;InputLabel id = &quot;Choose Language&quot;&gt;Language&lt;/InputLabel&gt;
                      &lt;Select
                        labelId=&quot;language-id&quot;
                        id=&quot;language&quot;
                        value={language}
                        onChange={e =&gt; handleLanguageChange(e)}
                        label=&quot;Language&quot;
                        MenuProps={{ classes: { paper: classes.select } }}
                      &gt;
                        &lt;MenuItem value={&quot;en&quot;}&gt;English&lt;/MenuItem&gt;
                        &lt;MenuItem value={&quot;ta&quot;}&gt;தமிழ்&lt;/MenuItem&gt;
                      &lt;/Select&gt;
                    &lt;/FormControl&gt;
                  &lt;/Toolbar&gt;
                &lt;/AppBar&gt;
              &lt;/div&gt;
            &lt;LanguageContext.Provider value={language}&gt;
              &lt;AllTabs/&gt;
            &lt;/LanguageContext.Provider&gt;
          &lt;/div&gt;
      &lt;/ThemeProvider&gt;
      &lt;/Suspense&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>src/locales/en/translation.json:</strong></p>
  <pre><code>{
      &quot;parentBody&quot; : &quot;This is the Parent Body&quot;
  }
  </code></pre>