Renaming Issue

frontend/src/components/BookedAppointment.jsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import Navbar from './nav'
-import "../components/css/bookAppointment.css";
+import React, { useEffect, useState } from "react";
+import Navbar from "./nav";
+import "../components/css/bookedAppointment.css";
 import { API } from "../helper/apicall";
-import Axios from 'axios';
-    import { Redirect } from 'react-router';
+import Axios from "axios";
+import { Redirect } from "react-router";
 
 function BookedAppointment(props) {
   const [data, setData] = useState([]);
@@ -13,9 +13,7 @@ function BookedAppointment(props) {
   useEffect(() => {
     const fetchData = async () => {
       setIsLoading(true);
-      const result = await Axios(
-        API +'/apointments',
-      );
+      const result = await Axios(API + "/apointments");
       setData(result.data.rows);
       setIsLoading(false);
       console.log(result.data.rows);
@@ -25,18 +23,16 @@ function BookedAppointment(props) {
   }, []);
 
   const removeData = (id) => {
-
-        Axios.delete(API + `/apointments/${id}`).then(res => {
-            const del = data.filter(item => id !== item.id)
-            setData(del)
+    Axios.delete(API + `/apointments/${id}`).then((res) => {
+      const del = data.filter((item) => id !== item.id);
+      setData(del);
       setRedirect(true);
-        })
-    }
-      
+    });
+  };
 
   const redirect = routeRedirect;
   if (redirect) {
-        return <Redirect to="/" />  
+    return <Redirect to="/" />;
   }
 
   return (
@@ -61,7 +57,7 @@ function BookedAppointment(props) {
             <div>Loading ...</div>
           ) : (
             <tbody>
-            {data.map(item => (
+              {data.map((item) => (
                 <tr key={item.id}>
                   <td className="text-center"> {item.PatientName}</td>
                   {/* <td className="text-center">{item.DocterName}</td> */}
@@ -72,7 +68,12 @@ function BookedAppointment(props) {
                   <td className="text-center">{item.Age}</td>
                   <td className="text-center">{item.Description}</td>
                   <td className="text-center">
-                <button onClick={() => removeData(item.id)} className="btn btn-danger">Delete</button>
+                    <button
+                      onClick={() => removeData(item.id)}
+                      className="btn btn-danger"
+                    >
+                      Delete
+                    </button>
                   </td>
                 </tr>
               ))}