From 26beb71441a9dcb2368ceb759812343af599db24 Mon Sep 17 00:00:00 2001
From: Carey P Gumaer <gumaerc@mit.edu>
Date: Fri, 30 Aug 2024 14:18:21 -0400
Subject: [PATCH] put hero image into its own component and set the random
 image in a state variable so it doesn't change on re-render (#1490)

---
 frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx
index cf164a6bc4..83befc5eda 100644
--- a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx
+++ b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx
@@ -186,6 +186,15 @@ const getRandomHeroImage = () => {
   return `/static/images/hero/hero-${imageNumber}.png`
 }
 
+const HeroImage: React.FC = () => {
+  const [heroImage, _] = useState(getRandomHeroImage)
+  return (
+    <ImageContainer>
+      <img alt="" src={heroImage} />
+    </ImageContainer>
+  )
+}
+
 const HeroSearch: React.FC = () => {
   const [searchText, setSearchText] = useState("")
   const onSearchClear = useCallback(() => setSearchText(""), [])
@@ -255,7 +264,7 @@ const HeroSearch: React.FC = () => {
         </ControlsContainer>
       </TitleAndControls>
       <ImageContainer>
-        <img alt="" src={getRandomHeroImage()} />
+        <HeroImage />
       </ImageContainer>
     </HeroWrapper>
   )