Dinamic import to JSON file in react component

Question

I am trying to read a json file with a react component. The idea is to be able to choose which file to read based on the default_lang variable. This is the file structure and how I am trying to read them.

./config.json

{
  "enable-lang":{
    "es": "spanish",
    "en": "spanish"
  },
  "default-lang": "en"
}

./dictionary/spanish.json

{
  "title": "Pagina en construccion",
  "description": "Esta página sigue en construcción"
}

./dictionary/english.json

{
  "title": "Page under construction",
  "description": "This page is still under construction"
}

./Language.js

import {Component} from "react";
import config from "./config.json";


export class Language extends Component
{
    static getUsedDictionary() {
        let used_lang = "es";
        let dictionary_path = `./dictionary/${ config["enable-lang"][used_lang] }.json`;
        return import(`${dictionary_path}`);
    }

    static getText (id) {
        let dictionary = this.getUsedDictionary();
        console.log("Dictionary value in getText:" + dictionary);
        console.log("Dictionary[id] value in getText:" + dictionary);
        if(dictionary[id] !== undefined) {
            return dictionary[id];
        } else {
            return dictionary['text-not-found'];
        }
    }
}

dictionary and dictionary[id] value in function getText. I con see this in console

Dictionary value in getText:[object Promise]
Dictionary[id] value in getText:[object Promise]

Thiago · Accepted Answer · 2022-04-22 05:15:49Z

1

Why not use react-i18next?

Or load everthing before and choose which one you'll use

answered Apr 22, 2022 at 5:15

Thiago

512 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jean Piffaut Over a year ago

Yes, but that would make that if I want a page or app with many languages, I have to load many json files and keep them loaded for use throughout the system.

Jean Piffaut Over a year ago

I am going to try react-i18next, I have never used it.

Juho Vepsäläinen · Accepted Answer · 2022-04-22 05:27:30Z

import() returns a Promise so to take that into account, you would have to refactor the code something like this:

import {Component} from "react";
import config from "./config.json";


export class Language extends Component
{
    static getUsedDictionary() {
        let used_lang = "es";
        let dictionary_path = `./dictionary/${ config["enable-lang"][used_lang] }.json`;
        return import(`${dictionary_path}`);
    }

    async static getText (id) {
        let dictionary = await this.getUsedDictionary();
        console.log("Dictionary value in getText:" + dictionary);
        console.log("Dictionary[id] value in getText:" + dictionary);
        if(dictionary[id] !== undefined) {
            return dictionary[id];
        } else {
            return dictionary['text-not-found'];
        }
    }
}

To complete the solution, it would be a good idea to handle possible exceptions coming from getUsedDictionary() as the request can fail. A modern option would be to go with an error boundary or you could do some other type of handling.

Note that you likely have to accommodate your code to deal with asynchronous getText after this change.

Collectives™ on Stack Overflow

Dinamic import to JSON file in react component

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related