Index: my-react-app/src/components/CustomerContext.js
===================================================================
--- my-react-app/src/components/CustomerContext.js	(revision c63036ab16a14814936f12df8a962c114af9774b)
+++ my-react-app/src/components/CustomerContext.js	(revision c63036ab16a14814936f12df8a962c114af9774b)
@@ -0,0 +1,26 @@
+import React, { createContext, useState, useEffect } from 'react';
+import axios from 'axios';
+
+export const CustomerContext = createContext();
+
+export const CustomerProvider = ({children}) => {
+    const[customers, setCustomers] = useState([]);
+
+    useEffect(() => {
+        const fetchCustomers = async () => {
+            try {
+                const response = await axios.get("http://localhost:8080/api/customers");
+                setCustomers(response.data)
+            } catch (error) {
+                console.log("Error fetching customers: ", error);
+            }
+        }
+        fetchCustomers()
+    }, []);
+
+    return(
+        <CustomerContext.Provider value={{customers}}>
+            {children}
+        </CustomerContext.Provider>
+    )
+}
Index: my-react-app/src/components/Customers.js
===================================================================
--- my-react-app/src/components/Customers.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
+++ my-react-app/src/components/Customers.js	(revision c63036ab16a14814936f12df8a962c114af9774b)
@@ -1,7 +1,8 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import React, {useEffect, useState} from "react";
+import React, {useContext, useEffect, useState} from "react";
 import axios from "axios";
 import { Link } from 'react-router-dom';
 import { useNavigate } from 'react-router-dom';
+import {CustomerContext} from "./CustomerContext";
 
 
@@ -9,17 +10,9 @@
     const [customers, setCustomers] = useState([]);
     const navigate = useNavigate();
+    const customersContext = useContext(CustomerContext);
 
     useEffect(() => {
-        const fetchCustomers = async () => {
-            try {
-                const response = await axios.get("http://localhost:8080/api/customers");
-                setCustomers(response.data);
-            } catch (error) {
-                console.error("Error fetching customers: ", error);
-            }
-        };
-
-        fetchCustomers()
-    }, []);
+        setCustomers(customersContext.customers)
+    }, [customersContext]);
 
     const handleDetailClick = (customerId) => {
Index: my-react-app/src/index.js
===================================================================
--- my-react-app/src/index.js	(revision cfc16a3143db2a719a3031cf0cf4bdb718b66d4f)
+++ my-react-app/src/index.js	(revision c63036ab16a14814936f12df8a962c114af9774b)
@@ -5,4 +5,5 @@
 import { CuisineProvider } from './components/CuisineContext';
 import {RestaurantProvider} from "./components/RestaurantContext";
+import {CustomerProvider} from "./components/CustomerContext";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -11,5 +12,7 @@
         <CuisineProvider>
             <RestaurantProvider>
-                <App />
+                <CustomerProvider>
+                    <App />
+                </CustomerProvider>
             </RestaurantProvider>
         </CuisineProvider>