How to use useContext to translate different pages

Question

I'm trying to understand 'useContext' to translate different Components of my application. In my code I'm receiving the error "language, languages, and handleIdiom is not defined". I understand that in my "Menu" Component I didn't define them, but in the "Languages" Component that it is my provider, I defined all.

I thought since my "Menu" is wrapper with , I could use it. Also, could you please look at the code and tell me what is wrong and what changes are required to achieve my goal?

Context:

import React, { createContext, useState, useContext } from "react";

export const languages = {
  en: {
    about: "about",
    project: "project",
    contact: "contact",
    slogan: "Think the Design, and I design the Code.",
    button: "Learn more",
  },
  ptbr: {
    about: "sobre",
    project: "projetos",
    contact: "contatos",
    slogan: "Think the Design, and I design the Code.",
    button: "Learn more",
  },
  jp: {
    about: "nihon",
    project: "nihon",
    contact: "nihon",
    slogan: "nihon",
    button: "nihon",
  },
  ru: {
    about: "руский",
    project: "руский",
    contact: "руский",
    slogan: "руский",
    button: "руский",
  },
};

export const LanguagesContext = React.createContext({ languages });

function Language() {
  const [idiom, setIdiom] = useState("en");

  const handleIdiom = (language) => (e) => {
    setIdiom(language);
  };

  return (
    <LanguagesContext.Provider
      value={{ idiom, setIdiom }}
    ></LanguagesContext.Provider>
  );
}

export function useIdiom() {
  const context = useContext(LanguagesContext);
  const { idiom, setIdiom } = context;
  return { idiom, setIdiom };
}

export default Language;

Menu:

import React, { useState, useContext } from "react";
import "./MenuStyle.scss";
import { FaBars } from "react-icons/fa";
import br from "../../assets/menu/brazil.svg";
import en from "../../assets/menu/eua.svg";
import ru from "../../assets/menu/russia.svg";
import jp from "../../assets/menu/japan.svg";

import { useIdiom } from "../../provider/Language.jsx";

import LanguagesProvider from "../../provider/Language";

function Menu() {
  // burger menu
  const [click, setClick] = useState(false);
  const handleClick = () => setClick(!click);
  const Close = () => setClick(false);

  // tradution
  const idiom = useIdiom();

  return (
    <LanguagesProvider>
      <div>
        <div
          className={click ? "main-container" : ""}
          onClick={() => Close()}
        />

        <nav className="navbar" onClick={(e) => e.stopPropagation()}>
          <div className="nav-container">
            <div exact to="/" className="nav-logo">
              <h1>Flávio</h1>
            </div>

            <div className="links">
              <ul className={click ? "nav-menu active" : "nav-menu"}>
                <li className="nav-item">
                  <a href="" activeClassName="active" className="nav-links">
                    {languages[language].about}
                  </a>
                </li>
                <li className="nav-item">
                  <a href="" activeClassName="active" className="nav-links">
                    {languages[language].project}
                  </a>
                </li>
                <li className="nav-item">
                  <a href="" activeClassName="active" className="nav-links">
                    {languages[language].contact}
                  </a>
                </li>

                <div className="flags-desktop">
                  <li>
                    <img src={en} alt="en" onClick={handleIdiom("en")} />
                  </li>
                  <li>
                    <img src={br} alt="ptbr" onClick={handleIdiom("ptbr")} />
                  </li>
                  <li>
                    <img src={ru} alt="ru" />
                  </li>
                  <li>
                    <img src={jp} alt="jp" />
                  </li>
                </div>
              </ul>
            </div>

            <div className="flags">
              <img src={en} alt="en" />
              <img src={br} alt="ptbr" />
              <img src={ru} alt="ru" />
              <img src={jp} alt="jp" />
            </div>

            <div className="nav-icon" onClick={handleClick}>
              <i className={click ? "fa fa-times" : "fa fa-bars"}>
                <FaBars />
              </i>
            </div>
          </div>
        </nav>
      </div>
    </LanguagesProvider>
  );
}

export default Menu;

Answer 1

We should wrap components where we want have access to language in Context.Provider. Then we can have access to context using hook useContext. Also added logic to save selected language to localStorage. Can be done like this:

import React, { useState, useContext } from "react";

// App.js

const defaultLanguage = "br";
export const LanguageContext = React.createContext();

function App() {
  const [language, setLanguage] = useState(() => {
    const langFromLocalStorage = window.localStorage.getItem("lang");

    return langFromLocalStorage ? langFromLocalStorage : defaultLanguage;
  });

  React.useEffect(() => {
    window.localStorage.setItem("lang", language);
  }, [language]);

  return (
    <div className="App">
      <LanguageContext.Provider value={[language, setLanguage]}>
        <Menu />
        <HomeComponent />
      </LanguageContext.Provider>
    </div>
  );
}

export default App;

// Menu.js :
// import { LanguageContext } from "...";

function Menu() {
  const languages = {
    en: {
      about: "about",
      project: "project",
      contact: "contact",
      slogan: "Think the Design, and I design the Code.",
      button: "Learn more",
    },
    br: {
      about: "sobre",
      project: "projetos",
      contact: "contatos",
      slogan: "Think the Design, and I design the Code.",
      button: "Learn more",
    },
    jp: {
      about: "nihon",
      project: "nihon",
      contact: "nihon",
      slogan: "nihon",
      button: "nihon",
    },
    ru: {
      about: "руский",
      project: "руский",
      contact: "руский",
      slogan: "руский",
      button: "руский",
    },
  };

  const [click, setClick] = useState(false);
  const Close = () => setClick(false);

  const [language, setLanguage] = useContext(LanguageContext);
  console.log(`language`, language);

  return (
    <>
      <div>
        <div
          className={click ? "main-container" : ""}
          onClick={() => Close()}
        />

        <nav className="navbar" onClick={(e) => e.stopPropagation()}>
          <div className="nav-container">
            <div className="links">
              <h1>Current Language is: {language}</h1>
              <ul className={click ? "nav-menu active" : "nav-menu"}>
                <li className="nav-item">
                  <a href="" activeClassName="active" className="nav-links">
                    {languages[language].about}
                  </a>
                </li>
                <li className="nav-item">
                  <a href="" activeClassName="active" className="nav-links">
                    {languages[language].project}
                  </a>
                </li>
                <li className="nav-item">
                  <a href="" activeClassName="active" className="nav-links">
                    {languages[language].contact}
                  </a>
                </li>

                <div className="flags-desktop">
                  <li>
                    <img
                      src={"en"}
                      alt="en"
                      onClick={() => setLanguage("en")}
                    />
                  </li>
                  <li>
                    <img
                      src={"br"}
                      alt="ptbr"
                      onClick={() => setLanguage("br")}
                    />
                  </li>
                  <li>
                    <img
                      src={"ru"}
                      alt="ru"
                      onClick={() => setLanguage("ru")}
                    />
                  </li>
                  <li>
                    <img
                      src={"jp"}
                      alt="jp"
                      onClick={() => setLanguage("jp")}
                    />
                  </li>
                </div>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </>
  );
}

const HomeComponent = () => {
  const [language] = useContext(LanguageContext);
  console.log(`language`, language);

  return (
    <div>
      <h1>HomeComponent</h1>
      <h1>Current Language is: {language}</h1>
    </div>
  );
};