Open App.jsx.

Keep your gallery chooser from the previous activity, but change the shape of each gallery object.

Instead of:

• name
• photos

each gallery should now have:

• name
• endpoint

For example:

const galleries = [
    {
        name: "Cats",
        endpoint: "https://www.apitutor.org/flickr/simple/?tags=cat"
    },
    {
        name: "Dogs",
        endpoint: "https://www.apitutor.org/flickr/simple/?tags=dog"
    },
    {
        name: "Birds",
        endpoint: "https://www.apitutor.org/flickr/simple/?tags=bird"
    }
];

Feel free to modify the categories and tags (or add more galleries). You should still keep state in App.jsx to track the currently selected gallery.

Now create a second state variable to hold the photos you fetch from the server.

For example:

const [photos, setPhotos] = useState([]);

At this point, photos should start as an empty array.

Still inside App.jsx, write an async function that accepts an endpoint as an argument.

Inside your function:

1. use fetch(...) to request the data
2. use await response.json() to turn the response into JavaScript data
3. convert the returned array of objects into an array of image URLs
4. call setPhotos(...) with that array

Here’s some sample code:

async function getPhotos(endpoint) {
    // issue the request:
    const response = await fetch(endpoint);

    // extract the JSON from the request:
    const data = await response.json();

    // extract the photo urls from the flickr data:
    const imageUrls = data.map((item) => item.img_url);
    setPhotos(imageUrls);
}

Why are we using data.map(...) here?

Because your existing Carousel component already expects an array of image URLs. This lets you keep most of your previous Carousel code.

Now import useEffect from React:

import React, { useEffect, useState } from "react";

Then add an effect that calls your getPhotos() function using the selected gallery’s endpoint.

useEffect(() => {
    getPhotos(selectedGallery.endpoint);
}, [selectedGallery]);

This is the big new idea in this activity.

The second argument to useEffect() is the dependency array:

• [] means “run this effect after the first render”
• [selectedGallery] means “run this effect again when the selected gallery changes”

In other words:

• when the app first loads, fetch the first gallery
• when the user clicks a different gallery, fetch new photos for that gallery

Update your JSX so that the Carousel component receives the photos state variable instead of a hard-coded array.

For example:

<Carousel gallery={photos} />

At first, photos will be an empty array. A moment later, after the fetch finishes, React will update the state and redraw the component.

Because the data comes from a server, the photos are not available immediately.

Add a small loading state to your JSX. For example:

• if photos.length === 0, show a message like Loading photos...
• otherwise, render the Carousel

This helps students see that server data arrives asynchronously.

Once your code is working, make sure you can explain the following:

1. Why do we use useState() for photos?
2. Why do we use useEffect() for getPhotos()?
3. Why is the selected gallery included in the dependency array?
4. Why do we transform the server data with map(...) before passing it to Carousel?
5. Why is each gallery storing an endpoint instead of a photos array?