Added the contextAPI and useContext

Author: michaelboateng1

src/App.js

@@ -32,7 +32,10 @@ import "./index.css";
 // import Index from "./advance_react/useReducer";
 
 // ! /* propDrilling */
-import PropDrilling from "./advance_react/prop_drilling/prop_drilling";
+// import PropDrilling from "./advance_react/prop_drilling/prop_drilling";
+
+// ! /* ContextAPI/useContext */
+import ContextAPI from "./advance_react/useContext/useContext";
 
 function App() {
   return (
@@ -67,7 +70,10 @@ function App() {
         {/* <Index /> */}
 
         {/* propDrilling */}
-        <PropDrilling />
+        {/* <PropDrilling /> */}
+
+        {/* contextAPI/useContext */}
+        <ContextAPI />
       </div>
     </React.Fragment>
   );

src/advance_react/useContext/useContext.js

@@ -0,0 +1,46 @@
+import React, { useState, useContext } from "react";
+import { data } from "../../data";
+
+const PeopleContext = React.createContext();
+
+function ContextAPI() {
+  const [people, setPeople] = useState(data);
+
+  const removeItem = (id) => {
+    setPeople((people) => {
+      return people.filter((person) => person.id !== id);
+    });
+  };
+
+  return (
+    <PeopleContext.Provider value={{ removeItem, people }}>
+      <h1>ContextAPI/useContext</h1>
+      <List people={people} />
+    </PeopleContext.Provider>
+  );
+}
+
+function List({ people }) {
+  const peopleData = useContext(PeopleContext);
+  return (
+    <>
+      {peopleData.people.map((person) => {
+        return <SinglePerson key={person.id} {...person} />;
+      })}
+    </>
+  );
+}
+
+function SinglePerson({ id, name }) {
+  const { removeItem } = useContext(PeopleContext);
+  return (
+    <div className="item">
+      <p>{name}</p>
+      <button type="button" onClick={() => removeItem(id)}>
+        romove
+      </button>
+    </div>
+  );
+}
+
+export default ContextAPI;