diff --git a/context-demo/src/components/App.js b/context-demo/src/components/App.js
index b110951..f22c1b6 100644
--- a/context-demo/src/components/App.js
+++ b/context-demo/src/components/App.js
@@ -1,7 +1,8 @@
import React from 'react';
import UserCreate from './UserCreate';
-import langContext from '../context/langContext';
+import { LanguageStore } from '../context/langContext';
import LanguageSelector from './LanguageSelector';
+
class App extends React.Component {
state = { lang: 'en' };
@@ -9,15 +10,15 @@ class App extends React.Component {
render() {
return (
-
-
- {/* Provider is a react component that is created for us to convey data to children */}
- {/* Provider creates a separate pipe of info each time it is created */}
+
+
+
+ {/* Provider is a react component that is created for us to convey data to children */}
+ {/* Provider creates a separate pipe of info each time it is created */}
-
-
-
diff --git a/context-demo/src/components/LanguageSelector.js b/context-demo/src/components/LanguageSelector.js
index 44b0e07..1a00bb0 100644
--- a/context-demo/src/components/LanguageSelector.js
+++ b/context-demo/src/components/LanguageSelector.js
@@ -1,13 +1,14 @@
import React from 'react';
-
+import langContext from "../context/langContext";
class LanguageSelector extends React.Component {
+ static contextType = langContext;
render() {
return (
Select A language :
- this.props.onLangChange('en')} >
- this.props.onLangChange('du')} >
+ this.context.onLangChange('en')} >
+ this.context.onLangChange('du')} >
);
}
diff --git a/context-demo/src/context/langContext.js b/context-demo/src/context/langContext.js
index 77540a4..63e9a91 100644
--- a/context-demo/src/context/langContext.js
+++ b/context-demo/src/context/langContext.js
@@ -1,3 +1,21 @@
import React from 'react';
-export default React.createContext('du');
\ No newline at end of file
+const Context = React.createContext('du');
+
+// separating business logic (state and action mutating it) from view using
+// a store (like redux) that is implemented with React.Context
+export class LanguageStore extends React.Component {
+ state = { lang: 'en' }
+
+ onLangChange = lang => this.setState({ lang })
+
+ render() {
+ return (
+
+ {this.props.children}
+
+ )
+ }
+}
+
+export default Context;
\ No newline at end of file