From 9b2475ecf42ded6668f4453480fc0a97d15b7b48 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sun, 9 Jan 2022 10:38:17 +0900
Subject: [PATCH] improved project card efficiency - improved badges rendering
 logic

---
 source/src/pages/Portfolio/ProjectCard.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/source/src/pages/Portfolio/ProjectCard.tsx b/source/src/pages/Portfolio/ProjectCard.tsx
index 55c40de..07b7119 100644
--- a/source/src/pages/Portfolio/ProjectCard.tsx
+++ b/source/src/pages/Portfolio/ProjectCard.tsx
@@ -6,6 +6,7 @@ import Card from "../../components/Card"
 
 import { PortfolioProject } from "../../../types/types"
 import theming from "../../styles/theming"
+import { useEffect, useState } from "react"
 
 const StyledProjectCard = styled(Card)`
 	margin-bottom: 2rem;
@@ -28,8 +29,15 @@ interface ProjectCardProps {
 const ProjectCard = (props: ProjectCardProps) => {
 	const { projectID, project } = props
 
+	const [badges, setBadges] = useState<JSX.Element[]>([])
 	const navigate = useNavigate()
 
+	useEffect(() => {
+		setBadges(
+			project.badges.map((badge) => <Badge key={badge} slug={badge} />)
+		)
+	}, [])
+
 	return (
 		<StyledProjectCard
 			onClick={() => navigate(process.env.PUBLIC_URL + projectID)}
@@ -37,9 +45,7 @@ const ProjectCard = (props: ProjectCardProps) => {
 			<h1>{project.name}</h1>
 			<StyledImg src={project.image} />
 
-			{project.badges.map((badge) => {
-				return <Badge key={badge} slug={badge} />
-			})}
+			{badges}
 			<hr />
 			<div dangerouslySetInnerHTML={{ __html: project.overview }} />
 		</StyledProjectCard>