javascript - React js, internationalization, switch language

Question

I want to switch language with a select button on change but the call don't work

HeaderComponent.js

import React, { Component } from "react";
import { Context } from "../Wrapper"

const context =useContext(Context);

class HeaderComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {  
    return (     
      <div>
        <header>
          <nav  class="navbar navbar-font">
            <div>
              <a
                href="http://localhost:3000/users"
                class="navbar navbar-light clrbrand">
                Oizo
              </a>

             <select   
            value={this.context.locale}
            onChange={this.context.selectLang} >
            <option value="en-US">English</option>
            <option value="fr-FR">French</option>
          </select>

            </div>
          </nav>
        </header>
      </div>
    );
  }
}

export default HeaderComponent; 

---

this is the wrapper file Wrraper.js

import React, { useState } from "react";
import { IntlProvider } from "react-intl";
import French from "./languages/fr-FR.json";
import English from "./languages/en-US.json";

const Context = React.createContext();
const local = navigator.language;

let lang;
if (local === "en-US") {
  lang = English;
} else {
  lang = French;
}

const Wrapper = (props) => {
  const [locale, setLocale] = useState(local);
  const [messages, setMessages] = useState(lang);

  function selectLang(e) {
    const newLocale = e.target.value;
    setLocale(newLocale);
    if (newLocale === "fr-FR") {
      setMessages(French);
    } else {
      setMessages(English);
    }
  }

  return (
    <Context.Provider value={{ locale, selectLang }}>
      <IntlProvider messages={messages} locale={locale}>
        {props.children}
      </IntlProvider>
    </Context.Provider>
  );
};

export default Wrapper;

---

and this is the error

TERMINAL

/src/components/HeaderComponent.js
Attempted import error: 'Context' is not exported from '../Wrapper'.
console.<computed> @ index.js:1
overrideMethod @ react_devtools_backend.js:2430
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 srccomponentsHeaderComponent.js
 Line 4:16:  'useContext' is not defined                                                                                                                          no-undef
 Line 4:16:  React Hook "useContext" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Answer 1

you need to do the following on Wrraper.js

const Context = React.createContext();

to

export  const Context = React.createContext();

For the header component.

import React, { Component } from "react";
import { Context } from "../Wrapper"



class HeaderComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {context:Context};
  }

  render() {  
    return (     
      <div>
        <header>
          <nav  class="navbar navbar-font">
            <div>
              <a
                href="http://localhost:3000/users"
                class="navbar navbar-light clrbrand">
                Oizo
              </a>

             <select   
            value={this.state.context.locale}
            onChange={this.staet.context.selectLang} >
            <option value="en-US">English</option>
            <option value="fr-FR">French</option>
          </select>

            </div>
          </nav>
        </header>
      </div>
    );
  }
}

export default HeaderComponent;