The SculpturesPage component presents a simple and interactive gallery for browsing a collection of sculptures.

• Shows information about a single sculpture, including:
  • its name,
  • artist,
  • year
  • image
  • and a short description.
• Displays the current position in the gallery and the total number of sculptures, helping you track where you are in the sequence.
• Provides a “Next” button to advance through the sculpture list.

import { useState } from "react";
import { sculptureList } from "./data.js";

export default function SculpturesPage() {
  const [index, setIndex] = useState(0);

  function handleClick() {
    setIndex(index + 1);
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <h2>Sculpures Gallery</h2>
      <button onClick={handleClick}>Next</button>({index + 1} of{" "}
      {sculptureList.length})
      <h2>
        <i>{sculptureList[index].name} </i>
        by {sculptureList[index].artist}
      </h2>
      <p>{sculptureList[index].year}</p>
      <img src={sculpture.url} alt={sculpture.alt} />
      <p>{sculpture.description}</p>
    </>
  );
}

How It Works: Hook flow

• The component uses React’s useState hook to keep track of the gallery’s current index position.
• When the “Next” button is pressed, the index state increases, and the next sculpture’s information is shown to the user.
• All sculpture data is sourced from the sculptureList array imported from a data module, making it easy to update or swap out content.

flowchart TD
    A["User clicks 'Next' button"] --> B["handleClick function"]
    B --> C["Calls setIndex(index + 1)"]
    C --> D["React schedules re-render"]
    D --> E["Component Render Phase"]
    E --> F["Reads sculptureList[index]"]
    F --> G["Returns updated UI with new sculpture"]
    G --> H["React updates DOM"]
    H --> I["User sees new sculpture on screen"]

The process begins when the user interacts with the component by clicking the “Next” button.
This triggers an event listener attached to the button element — typically defined as onClick={handleClick} in JSX.

The handler function runs immediately after the click event is detected.
Inside this function, the goal is to update the component’s internal state that keeps track of which sculpture is currently displayed.

Example:

function handleClick() {
  setIndex(index + 1);
}

This function doesn’t directly change the rendered UI — it just requests a state change.

When setIndex is called, React doesn’t change index immediately.
Instead, it schedules a new render with the updated state value.
This step ensures React can efficiently manage multiple updates and batch them if needed.

React marks the component as “dirty,” meaning it needs to be re-rendered to reflect the new state.
During this phase, React prepares the component for an update but doesn’t yet modify the DOM.

React calls your component function again (for function components) to compute what the UI should look like with the new state.
For example, if index was incremented, the component logic will now reference the updated state value.

In the render function, the component uses the current index to retrieve the sculpture data to show.
Example:

const sculpture = sculptureList[index];

This determines which sculpture object (title, image, description, etc.) will appear on screen next.

Based on the new data, the render function returns updated JSX.
React’s reconciliation algorithm compares the returned UI tree with the previous one to identify what actually changed.

After computing the differences, React applies minimal updates to the real DOM — only the nodes that changed are re-rendered.
This efficient diffing process keeps React fast and prevents unnecessary updates.

Finally, the browser reflects the updated UI, showing the new sculpture’s content.
At this point, the cycle completes — the user interaction led to a state update, a new render, and a refreshed UI.