useContext

.eslintcache

@@ -0,0 +1 @@
+[{"/Users/masa/WebstormProjects/React.training/src/index.js":"1","/Users/masa/WebstormProjects/React.training/src/App.js":"2","/Users/masa/WebstormProjects/React.training/src/reportWebVitals.js":"3","/Users/masa/WebstormProjects/React.training/src/components/Greet.js":"4","/Users/masa/WebstormProjects/React.training/src/components/Welcome.js":"5","/Users/masa/WebstormProjects/React.training/src/components/ComponentC.js":"6","/Users/masa/WebstormProjects/React.training/src/components/ComponentE.js":"7","/Users/masa/WebstormProjects/React.training/src/components/ComponentF.js":"8"},{"size":500,"mtime":1673772278075,"results":"9","hashOfConfig":"10"},{"size":992,"mtime":1674738716650,"results":"11","hashOfConfig":"10"},{"size":362,"mtime":1673772278075,"results":"12","hashOfConfig":"10"},{"size":747,"mtime":1674651925048,"results":"13","hashOfConfig":"10"},{"size":158,"mtime":1674651925048,"results":"14","hashOfConfig":"10"},{"size":176,"mtime":1674651925041,"results":"15","hashOfConfig":"10"},{"size":356,"mtime":1674651925041,"results":"16","hashOfConfig":"10"},{"size":772,"mtime":1674826841648,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"zmx66g",{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":4,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/masa/WebstormProjects/React.training/src/index.js",[],"/Users/masa/WebstormProjects/React.training/src/App.js",["34","35","36","37"],"/Users/masa/WebstormProjects/React.training/src/reportWebVitals.js",[],"/Users/masa/WebstormProjects/React.training/src/components/Greet.js",[],"/Users/masa/WebstormProjects/React.training/src/components/Welcome.js",[],"/Users/masa/WebstormProjects/React.training/src/components/ComponentC.js",[],"/Users/masa/WebstormProjects/React.training/src/components/ComponentE.js",[],"/Users/masa/WebstormProjects/React.training/src/components/ComponentF.js",[],{"ruleId":"38","severity":1,"message":"39","line":3,"column":8,"nodeType":"40","messageId":"41","endLine":3,"endColumn":13},{"ruleId":"38","severity":1,"message":"42","line":4,"column":8,"nodeType":"40","messageId":"41","endLine":4,"endColumn":15},{"ruleId":"38","severity":1,"message":"43","line":5,"column":8,"nodeType":"40","messageId":"41","endLine":5,"endColumn":18},{"ruleId":"38","severity":1,"message":"44","line":6,"column":8,"nodeType":"40","messageId":"41","endLine":6,"endColumn":18},"no-unused-vars","'Greet' is defined but never used.","Identifier","unusedVar","'Welcome' is defined but never used.","'ComponentC' is defined but never used.","'ComponentE' is defined but never used."]

src/App.js

@@ -2,14 +2,24 @@ import React, { Component } from 'react'
 import './App.css'
 import Greet from './components/Greet'
 import Welcome from "./components/Welcome";
+import ComponentC from "./components/ComponentC";
+import ComponentE from "./components/ComponentE";
+import ComponentF from "./components/ComponentF";
 
+export const Context = React.createContext()
+export const Channel = React.createContext()
 
 class App extends Component{
     render() {
       return(
        <div className="App">
-         <Greet name="Fuck you" age="45"/>
-         <Welcome/>
+         {/*<Greet name="Fuck you" age="45"/>*/}
+         {/*<Welcome title="hey you"/>*/}
+         <Context.Provider value={"fuckin jesus"}>
+           <Channel.Provider value={"ooooooo shit !!!!"}>
+             <ComponentF/>
+           </Channel.Provider>
+         </Context.Provider>
        </div>
       );
     }

src/components/ComponentC.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ComponentE from "./ComponentE";
+
+const ComponentC = () =>{
+  return(
+    <div>
+      <ComponentE/>
+    </div>
+  )
+}
+export default ComponentC;

src/components/ComponentE.js

@@ -0,0 +1,16 @@
+import React, {useContext} from "react";
+import {Context, Channel} from "../App";
+
+const ComponentE = () => {
+
+  const first = useContext(Context)
+  const second = useContext(Channel)
+  return(
+    <div>
+      {first} vs {second}
+    </div>
+  )
+}
+export default ComponentE;
+
+// this is not nesting the Context pt. Usually this useContext pattern is used.

src/components/ComponentF.js

@@ -0,0 +1,20 @@
+import React, {useContext} from "react";
+import {Context, Channel} from "../App"
+
+const ComponentF = () => {
+    const channel = useContext(Context)
+    const Test = useContext(Channel)
+  return(
+      <header>
+          Welcome back, {channel}!
+          You have {Test} notifications.
+      </header>
+  )
+}
+
+export default ComponentF;
+
+// In general, useContext can pass the object through the parent component, so u need not to import every parent
+// component to pass the parent value. First, write this code to parent component export const foo = React.createContext().
+// Second,  wrap with <Context.Provider value={"text"}>. Third, write constant to where u want to import it and wrap with
+// <Context.Consumer>. In this wrapping, u can rendering the value in there

src/components/Greet.js

@@ -2,8 +2,8 @@ import React from  'react'
 
 
 const Greet = (props) => {
-
-    return <h1>  Hello {props.name} ! </h1>
+console.log(props)
+    return <h1>  Hello {props.name}! </h1>
 }
 
 export default Greet;

src/components/Welcome.js

@@ -1,10 +1,9 @@
 import React from 'react'
 
 const Welcome = (props) => {
-  console.log(props)
   return(
     <div>
-      This is Welcome page.
+      This is Welcome page.{props.title}
     </div>
   )
 }