feat(language-example): change lang button way 02

Author: marzzy

src/Components/ChangeLang/Main02.js

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import Others from './Others02';
+import { LangContext } from './langContext';
+
+export default function MainBiggerComponent() {
+  const [lang, setLang] = useState('fa');
+
+  function toggleHandler() {
+    setLang(lang === 'en' ? 'fa' : 'en');
+  }
+
+  return (
+    <LangContext.Provider value={{ lang, toggleHandler }}>
+      <LangTogglerIndependent />
+      <Others />
+    </LangContext.Provider>
+  );
+}
+
+function LangTogglerIndependent() {
+  return (
+    <LangContext.Consumer>
+      {({ lang, toggleHandler }) => (
+        <button type="submit" onClick={toggleHandler}>
+          active lang :
+          {lang}
+        </button>
+      )}
+    </LangContext.Consumer>
+  );
+}

src/Components/ChangeLang/Others02.js

@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { LangContext, languagesObject } from './langContext';
+
+export default function Others() {
+  return (
+    <FirstInnerComponent />
+  );
+}
+
+function FirstInnerComponent() {
+  return (
+    <SecoundInnerComponent />
+  );
+}
+
+function SecoundInnerComponent() {
+  return (
+    <ThirdInnerComponent />
+  );
+}
+
+function ThirdInnerComponent() {
+  const { lang } = useContext(LangContext);
+
+  return (
+    <p>{languagesObject[lang].join(' ')}</p>
+  );
+}

src/Components/ChangeLang/index.js

@@ -1,11 +1,17 @@
 import React from 'react';
 import MainBiggerComponent from './Main';
+import MainBiggerComponent02 from './Main02';
 
 export default function ChangeLang() {
   return (
     <>
       <h1>lang example</h1>
+      <h2>way 01 :</h2>
       <MainBiggerComponent />
+      <br />
+      <h2>way 02 :</h2>
+      <MainBiggerComponent02 />
+      <br />
     </>
   );
 }

src/Components/ChangeLang/langContext.js

@@ -5,7 +5,10 @@ const languagesObject = {
   fa: ['سلام', 'عزیزم', 'چطوری؟'],
 };
 
-const LangContext = React.createContext(languagesObject.fa);
+const LangContext = React.createContext({
+  lang: languagesObject.fa,
+  toggleLang: () => { },
+});
 
 export {
   LangContext,