How to mirror the state from switch button with ReactJS?

I’m still a beginner with ReactJS and I need to mirror my switch button in my application.

My switch button change the language from my application, and I have the same button in the header and footer of my pages.

When I change the language from the site, the another button doesn’t change at the same time, for example, if I click in my header component to change the language, the button in my footer stay the same way.

enter image description here

I put this example into codesandbox.io

Can you tell me how do I fix the buttons?

import "./styles.scss";
import { I18nProvider } from "./providers/i18n";
import ToggleLanguage from "./components/ToggleLanguage/ToggleLanguage.js";

export default function App() {
  return (
    <I18nProvider>
      <div className="App">
        <h3>Example Header</h3>
        <ToggleLanguage />
        <div style={{ margin: "20px 0" }} />
        <h3>Example Footer</h3>
        <ToggleLanguage />
      </div>
    </I18nProvider>
  );
}

import React from "react";
import "./ToggleLanguage.scss";

// providers
import { AppContext } from "../../providers/app";
import { saveToStorage } from "../../utils/localStorage";

const ToggleLanguage = () => {
  const { state, dispatch } = React.useContext(AppContext);

  const onToggleSiteLang = (siteLang) => () => {
    dispatch({ type: "setLang", siteLang });
    saveToStorage("siteLang", siteLang);
  };

  return (
    <div className="toggle-language">
      <label className="switch">
        <input
          onChange={() => onToggleSiteLang(state.siteLang)}
          className="switch-checkbox"
          type="checkbox"
        />
        <div className="switch-button" />
        <div className="switch-labels">
          <span>PT</span>
          <span>EN</span>
        </div>
      </label>
    </div>
  );
};

export default ToggleLanguage;

Thank you very much in advance for any help/tip.

Answer

Just control your checkbox with your state. checked={state.siteLang === 'en'}

import React from "react";
import "./ToggleLanguage.scss";

// providers
import { AppContext } from "../../providers/app";
import { saveToStorage } from "../../utils/localStorage";

const ToggleLanguage = () => {
  const { state, dispatch } = React.useContext(AppContext);

  const onToggleSiteLang = (siteLang) => () => {
    dispatch({ type: "setLang", siteLang });
    saveToStorage("siteLang", siteLang);
  };

  return (
    <div className="toggle-language">
      <label className="switch">
        <input
          onChange={() => onToggleSiteLang(state.siteLang)}
          className="switch-checkbox"
          type="checkbox"
          checked={state.siteLang === 'en'}
        />
        <div className="switch-button" />
        <div className="switch-labels">
          <span>PT</span>
          <span>EN</span>
        </div>
      </label>
    </div>
  );
};

export default ToggleLanguage;

Let me know if this works for you

Leave a Reply

Your email address will not be published. Required fields are marked *