Reputation: 185
I have the following code and so far everything is working but the content is static. I am looking how to implement the lang switcher but Im stack on how to import different obj with each selected lang.
import React, { Component, createContext } from "react";
import { en } from "./components/language/en";
import { gr } from "./components/language/gr";
const Context = createContext();
export class Provider extends Component {
constructor() {
super();
this.state = {
lang: en
};
}
selectLanguage = e => {
this.setState({ lang: e.target.value });
};
render() {
return (
<Context.Provider
value={{ lang: this.state.lang, selectLang: this.selectLanguage
}}
>
{this.props.children}
</Context.Provider>
);
}
}
export const Consumer = Context.Consumer;
Upvotes: 0
Views: 878
Reputation: 525
First, you need create object to hold all your jsons:
import { en } from "./components/language/en";
import { gr } from "./components/language/gr";
var langs = {
en: en,
gr: gr
};
Then change selectLanguage
to:
selectLanguage = e => {
const langKey = e.target.value;
this.setState({ lang: langs[langKey] });
};
Upvotes: 1