diff --git a/src/App.js b/src/App.js
index 2b15309..a50a8e5 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,9 +1,21 @@
+import { useContext } from "react";
import "./App.css";
+import { HeadachesContext } from "./index";
-function App({ name }) {
+function App() {
+ //any component that is part of the app, because its
+ //been wrapper in the provider, we can read the value of
+ //headache context just calling useContext
+ const { headaches } = useContext(HeadachesContext);
+ console.log(headaches); // a object headaches (4 elements)
return (
-
-
Hello,{name}
+
+
Types of headaches
+
+ {headaches.map((headache) => (
+ - {headache.type}
+ ))}
+
);
}
diff --git a/src/index.js b/src/index.js
index 0c00251..bfca31c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,26 +1,22 @@
import React, { createContext } from "react";
import ReactDOM from "react-dom";
import "./index.css";
+import App from "./App";
-export const TreesContext = createContext();
+export const HeadachesContext = createContext();
-const trees = [
+//make all this data acessible to all app
+const headaches = [
{ id: "1", type: "migraines" },
{ id: "2", type: "digestive problem" },
{ id: "3", type: "sinus headaches" },
{ id: "4", type: "tension" }
];
-export default function App() {
- return (
-
-
Types of headaches
-
- );
-}
+// Pass data down to the child components
ReactDOM.render(
-
+
- ,
+ ,
document.getElementById("root")
);