refactor:convert prop drilling to context api

Author: veiled-coder

src/App.js

@@ -6,26 +6,34 @@ import Footer from "./components/Footer";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Place from "./components/Place";
 import Modal from "./components/Modal";
+import { createContext } from "react";
+
+export const thetruecontext = createContext();
 
 function App() {
- 
   const [showModal, setshowModal] = useState(false);
 
-   
+  const trueboolean = function funcTrue() {
+    setshowModal(true);
+  };
   return (
     <Router>
       <>
-   
-        <Modal modalState={showModal} setshowModalFalse={()=>setshowModal(false)} />
-        <Nav setshowModalTrue={() => setshowModal(true)} />
+        <Modal
+          modalState={showModal}
+          setshowModalFalse={() => setshowModal(false)}
+        />
+        <thetruecontext.Provider value={trueboolean}>
+          <Nav />
+        </thetruecontext.Provider>
+
         <Routes>
           <Route path="/" element={<Homepage />} />
 
           <Route path="/place" element={<Place />} />
         </Routes>
         <Footer />
-      
-        </>
+      </>
     </Router>
   );
 }

src/Nav.js

@@ -9,7 +9,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link } from 'react-router-dom';
 
 
-function Nav({setshowModalTrue}) {
+
+function Nav() {
+
 
   return (
     <section className="nav--container grid">
@@ -28,7 +30,7 @@ function Nav({setshowModalTrue}) {
         </nav>
         <div>
           {" "}
-          <Button name="Connect wallet" styleclass="nav-btn" clicked={setshowModalTrue} />
+          <Button name="Connect wallet" styleclass="nav-btn"/>
                 </div>
         <div className="hamburger-menu">
           <FontAwesomeIcon icon={faBars} className="hamburger-menu" />

src/components/Button.js

@@ -1,8 +1,11 @@
 import React from "react";
 import "../styles/button.css";
+import { thetruecontext } from '../App';
+import { useContext } from "react";
 
-function Button({ name, styleclass,clicked }) {
-  return <button onClick={clicked} className={`btn ${styleclass}`}>{name}</button>;
+function Button({ name, styleclass}) {
+  const settoTrue = useContext(thetruecontext);
+  return <button onClick={settoTrue} className={`btn ${styleclass}`}>{name}</button>;
 }
 
 export default Button;