placing data in context - createContext

src/index.js

@@ -1,38 +1,26 @@
-import React from "react";
+import React, { createContext } from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
-import { useInput } from "./useInput";
 
-// useInput will received a value (nameProps)
-// and atribute the initial value (resetName)
-export default function App() {
-  const [nameProps, resetName] = useInput("");
-  const [birthProps, resetBirth] = useInput("");
-
-  const submit = (e) => {
-    e.preventDefault();
-    alert(`${nameProps.value} was born in ${birthProps.value}`);
-    resetBirth();
-    resetName();
-  };
-
-  // just need pass nameProps to value ({value,
-  // onChange}, resetValue) inside {...nameProps}
+export const TreesContext = createContext();
 
+const trees = [
+  { id: "1", type: "migraines" },
+  { id: "2", type: "digestive problem" },
+  { id: "3", type: "sinus headaches" },
+  { id: "4", type: "tension" }
+];
+export default function App() {
   return (
-    <form onSubmit={submit}>
-      <input {...nameProps} type="text" placeholder="name..." />
-
-      <input {...birthProps} type="date" />
-
-      <button>Submit</button>
-    </form>
+    <div>
+      <h1>Types of headaches</h1>
+    </div>
   );
 }
 
 ReactDOM.render(
-  <React.StrictMode>
+  <TreesContext.Provider value={{ trees }}>
     <App />
-  </React.StrictMode>,
+  </TreesContext.Provider>,
   document.getElementById("root")
 );