useContext to access data from any child components

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 (
-    <div className="App">
-      <h1>Hello,{name}</h1>
+    <div>
+      <h1>Types of headaches</h1>
+      <ul>
+        {headaches.map((headache) => (
+          <li key={headache.id}>{headache.type}</li>
+        ))}
+      </ul>
     </div>
   );
 }

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 (
-    <div>
-      <h1>Types of headaches</h1>
-    </div>
-  );
-}
 
+// Pass data down to the child components
 ReactDOM.render(
-  <TreesContext.Provider value={{ trees }}>
+  <HeadachesContext.Provider value={{ headaches }}>
     <App />
-  </TreesContext.Provider>,
+  </HeadachesContext.Provider>,
   document.getElementById("root")
 );