CODEWITHSUNDEEP
javascriptjsonreactjs
PanosCool
PanosCool

Reputation: 185

How to implement a multi-language site with React context API

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

Answers (1)

Kenzk447
Kenzk447

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

Related Questions