Updating translations on the fly

[randohinn]

Am I correct in believing, based on my test attempts, that this library does not yet support changing translations on the fly?

I'm currently testing with this:

import './stylesheets/Application.css';
import React, { useState, useEffect } from 'react';
import { Router, Link, Location, navigate, globalHistory} from '@reach/router';
import Menuscreen from './Menuscreen.js';
import Scanscreen from './Scanscreen.js';
import Picturescreen from './Picturescreen.js';
import ErrorBoundary from './ErrorBoundary.js';
import ApplicationContext from './ApplicationContext.js';
import { TranslatorProvider } from "react-translate"


export default function Application() {
    const [lang, setLanguage] = useState(localStorage.getItem('ahhaaLanguage') || 'et');
    const [qrCode, setQrCode] = useState(localStorage.getItem('ahhaaQR'));
    const [translations, setTranslations] = useState({locale:"et"});

    useEffect(() => {
        setTranslations({
          locale: "et",
          Scanscreen: {
            SIMPLE_KEY: "ABCDEF",
            KEY_WITH_PARAMS: "Hello {{name}}",
            KEY_WITH_PLURAL: [
              "You have {{n}} message",
              "You have {{n}} messages",
            ],
          },
        });
       console.log(translations);
});

    return (
        <ErrorBoundary>
            <ApplicationContext.Provider value={{ lang, qrCode, setLanguage, setQrCode, translations, setTranslations }}>
                <TranslatorProvider translations={translations}>
                    <Location>
                        <Router>
                                <Scanscreen path="/" default />
                                <Menuscreen path="/menu" />
                                <Picturescreen path="/pictures" />
                        </Router>
                    </Location>
                </TranslatorProvider>
            </ApplicationContext.Provider>
        </ErrorBoundary>
    );
}

And seeing that my translations set in the effect hook, are not rendered in my Scanscreen, as translated values, instead, I only see the key names, as if no translations existed for that key. What would be the minimum amount of work required to implement this?

[randohinn]

@bloodyowl Any ideas?

[bloodyowl]

hum AFAIK it should work. don't you have some shouldComponentUpdate at some point in your app?

[randohinn]

hum AFAIK it should work. don't you have some shouldComponentUpdate at some point in your app?

Absolutely none exist :/

[randohinn]

I have hereby changed libraries for translation, but this should still be looked into, as this is one of the top hits on google for "react translations".

[bloodyowl]

isn't it simply because your locale stayed the same? the translator is only updated if this value is changed.
https://github.com/bloodyowl/react-translate/blob/master/src/translate.js#L16