From 8ee73c6859c30607d6ffbbba8dc2d828b73376ec Mon Sep 17 00:00:00 2001
From: saurav10codes <kumar10saurav10@gmail.com>
Date: Fri, 4 Sep 2026 14:54:09 +0530
Subject: [PATCH] Fix out-of-bounds error on the page
 /learn/state-a-components-memory

---
 src/content/learn/state-a-components-memory.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 0637dd173d4..53603f581dc 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -190,11 +190,11 @@ const [index, setIndex] = useState(0);
 
 > The `[` and `]` syntax here is called [array destructuring](https://javascript.info/destructuring-assignment) and it lets you read values from an array. The array returned by `useState` always has exactly two items.
 
-This is how they work together in `handleClick`:
+This is how they work together in `handleClick` (`% sculptureList.length` is used to return to the first item when the index exceeds the list index):
 
 ```js
 function handleClick() {
-  setIndex(index + 1);
+  setIndex((index + 1) % sculptureList.length);
 }
 ```
 
@@ -210,7 +210,7 @@ export default function Gallery() {
   const [index, setIndex] = useState(0);
 
   function handleClick() {
-    setIndex(index + 1);
+    setIndex((index + 1) % sculptureList.length);
   }
 
   let sculpture = sculptureList[index];
@@ -394,7 +394,7 @@ export default function Gallery() {
   const [showMore, setShowMore] = useState(false);
 
   function handleNextClick() {
-    setIndex(index + 1);
+    setIndex((index + 1) % sculptureList.length);
   }
 
   function handleMoreClick() {
@@ -759,7 +759,7 @@ export default function Gallery() {
   const [showMore, setShowMore] = useState(false);
 
   function handleNextClick() {
-    setIndex(index + 1);
+    setIndex((index + 1) % sculptureList.length);
   }
 
   function handleMoreClick() {
@@ -930,7 +930,7 @@ export default function Gallery() {
   const [showMore, setShowMore] = useState(false);
 
   function handleNextClick() {
-    setIndex(index + 1);
+    setIndex((index + 1) % sculptureList.length);
   }
 
   function handleMoreClick() {
@@ -1082,7 +1082,7 @@ export default function Gallery() {
 
   function handleNextClick() {
     if (hasNext) {
-      setIndex(index + 1);
+      setIndex((index + 1) % sculptureList.length);
     }
   }