change useRef syntax from class to functional

src/App.jsx

@@ -1,33 +1,35 @@
-import { AuthProvider } from "./context/authContext";
-import { useRoutes } from "react-router-dom";
+import { AuthProvider } from './context/authContext'
+import { useRoutes } from 'react-router-dom'
 
-import Header from "./components/Header";
-import Footer from "./components/Footer";
-import Dashboard from "./pages/Dashboard";
-import Home from "./pages/home";
-import SignUp from "./pages/Signup";
-import SignIn from "./pages/Signin";
-import Board from "./pages/Board";
-import CreateBoard from "./pages/CreateBoard";
+import Header from './components/Header'
+import Footer from './components/Footer'
+import Dashboard from './pages/Dashboard'
+import Home from './pages/home'
+import SignUp from './pages/Signup'
+import SignIn from './pages/Signin'
+import Board from './pages/Board'
+import CreateBoard from './pages/CreateBoard'
+import Practice from './pages/Practice/Practice'
 
 function App() {
   const routes = useRoutes([
-    { path: "/", element: <Home /> },
-    { path: "/signup", element: <SignUp /> },
-    { path: "/login", element: <SignIn /> },
-    { path: "/Home", element: <Home /> },
-    { path: "/dashboard", element: <Dashboard /> },
-    { path: "/board/:id", element: <Board /> },
-    { path: "/createboard", element: <CreateBoard /> },
-  ]);
+    { path: '/', element: <Home /> },
+    { path: '/signup', element: <SignUp /> },
+    { path: '/login', element: <SignIn /> },
+    { path: '/Home', element: <Home /> },
+    { path: '/dashboard', element: <Dashboard /> },
+    { path: '/board/:id', element: <Board /> },
+    { path: '/createboard', element: <CreateBoard /> },
+    { path: '/practice', element: <Practice /> },
+  ])
 
   return (
     <AuthProvider>
       <Header />
       {routes}
       <Footer />
     </AuthProvider>
-  );
+  )
 }
 
-export default App;
+export default App

src/pages/CreateBoard/index.jsx

@@ -1,53 +1,70 @@
-import React, { useRef } from "react";
-import { createBoard } from "../../utils/firebaseUtils";
-import { useNavigate } from "react-router-dom";
+import React, { useRef } from 'react'
+import { createBoard } from '../../utils/firebaseUtils'
+import { useNavigate } from 'react-router-dom'
 
 const CreateBoard = () => {
-  const titleRef = React.createRef();
-  const descriptionRef = React.createRef();
-  const navigate = useNavigate();
+  const titleRef = useRef(null)
+  const descriptionRef = useRef(null)
+  const navigate = useNavigate()
 
   const handleSubmit = async (event) => {
-    event.preventDefault();
+    event.preventDefault()
 
     try {
-      await createBoard({ title: titleRef.current.value, description: descriptionRef.current.value });
-      titleRef.current.value = "";
-      descriptionRef.current.value = "";
-      navigate("/dashboard");
+      await createBoard({
+        title: titleRef.current.value,
+        description: descriptionRef.current.value,
+      })
+      titleRef.current.value = ''
+      descriptionRef.current.value = ''
+      navigate('/dashboard')
     } catch (error) {
-      console.log(error.message);
+      console.log(error.message)
     }
-  };
+  }
 
   return (
     <div className="bg-white p-6 min-h-48">
-      <h2 className="text-2xl font-bold mb-5 text-center">Create a new board</h2>
-      <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="title">
+      <h2 className="text-2xl font-bold mb-5 text-center">
+        Create a new board
+      </h2>
+      <form
+        onSubmit={handleSubmit}
+        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
+      >
+        <label
+          className="block text-gray-700 text-sm font-bold mb-2"
+          htmlFor="title"
+        >
           Title:
           <input
             id="title"
             type="text"
-            ref={titleRef} 
+            ref={titleRef}
             required
             className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
           />
         </label>
-        <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="description">
+        <label
+          className="block text-gray-700 text-sm font-bold mb-2"
+          htmlFor="description"
+        >
           Description:
           <textarea
-            id="description" 
-            ref={descriptionRef} 
+            id="description"
+            ref={descriptionRef}
             className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
           />
         </label>
-        <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
+        <button
+          type="submit"
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
+        >
           Create
         </button>
       </form>
     </div>
-  );
-};
+  )
+}
 
-export default CreateBoard;
+export default CreateBoard