From cd55a4b714b1d893d7db32fc2ca3feec7bacc3c5 Mon Sep 17 00:00:00 2001
From: Arya Sharma <aryapro2004@gmail.com>
Date: Fri, 4 Sep 2026 13:17:59 +0530
Subject: [PATCH] Implement wrap-around functionality for sculpture gallery
 navigation

---
 .../learn/state-a-components-memory.md        | 40 ++++++++++++++++---
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
index 0637dd173d4..639341daabe 100644
--- a/src/content/learn/state-a-components-memory.md
+++ b/src/content/learn/state-a-components-memory.md
@@ -193,12 +193,20 @@ const [index, setIndex] = useState(0);
 This is how they work together in `handleClick`:
 
 ```js
+const hasNext = index < sculptureList.length - 1;
+
 function handleClick() {
-  setIndex(index + 1);
+  if (hasNext) {
+    setIndex(index + 1);
+  } else {
+    setIndex(0);
+  }
 }
 ```
 
-Now clicking the "Next" button switches the current sculpture:
+The `hasNext` check circles back to the first sculpture after the last one.
+
+Now clicking the "Next" button switches the current sculpture, wrapping around to the first one after the last:
 
 <Sandpack>
 
@@ -208,9 +216,14 @@ import { sculptureList } from './data.js';
 
 export default function Gallery() {
   const [index, setIndex] = useState(0);
+  const hasNext = index < sculptureList.length - 1;
 
   function handleClick() {
-    setIndex(index + 1);
+    if (hasNext) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
   }
 
   let sculpture = sculptureList[index];
@@ -392,9 +405,14 @@ import { sculptureList } from './data.js';
 export default function Gallery() {
   const [index, setIndex] = useState(0);
   const [showMore, setShowMore] = useState(false);
+  const hasNext = index < sculptureList.length - 1;
 
   function handleNextClick() {
-    setIndex(index + 1);
+    if (hasNext) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
   }
 
   function handleMoreClick() {
@@ -573,9 +591,14 @@ function Gallery() {
   // Each useState() call will get the next pair.
   const [index, setIndex] = useState(0);
   const [showMore, setShowMore] = useState(false);
+  const hasNext = index < sculptureList.length - 1;
 
   function handleNextClick() {
-    setIndex(index + 1);
+    if (hasNext) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
   }
 
   function handleMoreClick() {
@@ -757,9 +780,14 @@ import { sculptureList } from './data.js';
 export default function Gallery() {
   const [index, setIndex] = useState(0);
   const [showMore, setShowMore] = useState(false);
+  const hasNext = index < sculptureList.length - 1;
 
   function handleNextClick() {
-    setIndex(index + 1);
+    if (hasNext) {
+      setIndex(index + 1);
+    } else {
+      setIndex(0);
+    }
   }
 
   function handleMoreClick() {