React JSON not returning object data

Question

In my React App, I am using JSON for text strings inside of components:

example:

              <h2>
                {i18next.t('PODMODAL.title')}{' '}
              </h2>

I receive this data from my JSON File:

config.JSON:

[
    "PODMODAL": {
      "title": "some info",
      "firstline": "some info",
      "secondline": "some info",
      "cta: "click here"
    }
]

When I run the React App, instead of displaying the string it will display the key but not the values of the key. On a button for example. Instead of [ CLICK HERE ], it will show [PODMODAL.cta]

getJSON.js

In this file, I am calling the function to stringify my JSON:

function loadJSON(filePath) {
  const json = loadTextFileAjaxSync(filePath, 'application/json');
  return JSON.stringify(json);
}
function loadTextFileAjaxSync(filePath, mimeType) {
  const xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', filePath, false);
  if (mimeType != null) {
    if (xmlhttp.overrideMimeType) {
      xmlhttp.overrideMimeType(mimeType);
    }
  }
  xmlhttp.send();
  if (xmlhttp.status === 200) {
    return xmlhttp.responseText;
  } else {
    return null;
  }
}
window.userLang = navigator.language || navigator.userLanguage;
let language = window.userLang.split('-')[0];
export const data = loadJSON(
  '../../../../locales/' + language + '/translation.json'
);
export const config = loadJSON('../../public/config/config.json');

I'm not getting any errors in the console but it is not displaying the correct info on the screen. I'm not sure exactly what I'm doing wrong, any help would be appreciated.

Update I've updated the question to include the two JSON files that are exported in getJSON.js (see above) Looking in the console, there is the following error on all of the keys:

i18next::translator: missingKey en-US translation GENERAL.join GENERAL.join

i18n.js:

import i18next from 'i18next';
import XHR from 'i18next-xhr-backend';
import { data, config } from './loadJSON';

i18next.use(XHR).init(
  {
    lng: window.userLang,
    fallbackLng: window.userLang,
    debug: true,
    resources: {
      it: {
        translation: data,
        config: config,
      },
      en: {
        translation: data,
        config: config,
      },
    },
  },
  function (err, t) {
    // init set content
    const language =
      (navigator.languages && navigator.languages[0]) ||
      navigator.language ||
      navigator.userLanguage;
    console.log('language ', language);
  }
);

export default i18next;

Answer 1

There are some misconceptions here

1- XMLHttpRequest is async in nature, so the loadJSON function will be returning a promise and the exported config is not immediately ready to be used

2- You are trying to stringify the result of http request, which is a already a json text, In this case it seems you need JSON.parse()

3- You are trying to load a local file at compile time which will not work, so you either have to make your translations accessible through the network, and then you can access them using an AJAX request (xmlHttpRequest) or you can get them at compile type - You have to configure your build tool chain to enable you to import json files

4- its always best to use already established solutions for well established problems, internalization is one of these problems, search for a react internationalization problem that will be better choice then trying to reinvent a new one