Li

apps/web/src/app/main/courses/components/CourseCard.tsx

@@ -41,7 +41,7 @@ export default function CourseCard({ course }: CourseCardProps) {
 			}>
 			<div className="px-4">
 				<div className="flex gap-2 mb-4">
-          {course.terms.map((term) => {
+          {course?.terms?.map((term) => {
             return (
               <Tag
                 key={term.id}
@@ -85,7 +85,7 @@ export default function CourseCard({ course }: CourseCardProps) {
 					<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
 					<div className="ml-2 flex items-center flex-grow">
 						<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
-							{(course.depts.map((depts)=>depts.name))}
+							{(course?.depts?.map((depts)=>depts.name))}
               {/* {course?.depts?.[0]?.name} */}
 						</Text>
 					</div>

apps/web/src/app/main/home/components/CoursesSection.tsx

@@ -123,8 +123,8 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
 					{isDataLoading ? (
 						<Spin className="m-3" />
 					) : (
-						displayedCourses?.map((course) => (
-							<CourseCard course={course}></CourseCard>
+						displayedCourses?.map((course,index) => (
+							<CourseCard course={course} key={index}></CourseCard>
 						))
 					)}
 				</div>