put hero image into its own component and set the random image in a s…

…tate variable so it doesn't change on re-render (#1490)
mitodl · Aug 30, 2024 · 26beb71 · 26beb71
1 parent 22450f6
commit 26beb71
Showing 1 changed file with 10 additions and 1 deletion.
diff --git 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>
   )