Implement wrap-around functionality for sculpture gallery navigation

Author: Arya-00

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() {