fix search bar

Author: NE1NN

overload/src/app/components/SearchBar.tsx

@@ -1,5 +1,5 @@
 'use client';
-import React from 'react'
+import React from 'react';
 import CourseCard from './CourseCard';
 
 type Course = {
@@ -20,10 +20,13 @@ export const SearchBar = () => {
 
   React.useEffect(() => {
     // Fetch the term list
-    fetch('http://localhost:3000/api/home') // Fetch terms
+    fetch('http://localhost:3000/api/home', { cache: 'no-store' }) // Fetch terms
       .then((response) => response.json()) // turn data from promise into a json file so we can use data
-      .then((data) => setDataList(data)) // set data using setData hook
-      .catch(error => {
+      .then((data) => {
+        console.log(data);
+        setDataList(data);
+      }) // set data using setData hook
+      .catch((error) => {
         // if promise not fulfilled
         console.log('Error:' + `${error.message}`);
       });
@@ -33,25 +36,29 @@ export const SearchBar = () => {
     item.course.courseName.toLowerCase().includes(searchTerm.toLowerCase())
   );
 
-  const courseCards = filteredData.map(item => {
+  const courseCards = filteredData.map((item, idx) => {
     return (
-      <div>
+      <div key={idx}>
         <CourseCard
-        courseCode={item.course.courseCode}
-        courseName={item.course.courseName}
+          courseCode={item.course.courseCode}
+          courseName={item.course.courseName}
         />
       </div>
     );
-  })
+  });
 
   return (
     <div className="justify-center">
       <div className="px-20">
-        <input className="px-3 w-full bg-white py-0.1 text-0.5xl border border-black rounded-md text-left placeholder-left" type="text" placeholder="search for a course..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)}/>
+        <input
+          className="px-3 w-full bg-white py-0.1 text-0.5xl border border-black rounded-md text-left placeholder-left"
+          type="text"
+          placeholder="search for a course..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+        />
       </div>
-      <ul className="flex flex-wrap justify-center">
-        {courseCards}
-      </ul>
+      <ul className="flex flex-wrap justify-center">{courseCards}</ul>
     </div>
-  )
-}
+  );
+};