Getting url's of mapped image array from firebase in React

Question

I have a functioning image slider in the site I am building ( https://github.com/kimcoder/react-simple-image-slider ) that takes in an array of images that are input via Object.values(images) . I want to swap over to a grid array ( https://github.com/benhowell/react-grid-gallery ).

I am having trouble getting the image urls from the object array and displaying them.

This is what my Firebase DB image structure looks like inside the post itself:

Here's the code I have from the page:

import React, { useContext, useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { DatabaseContext } from '../contexts/database-context';
import Gallery from 'react-grid-gallery';
import '../scss/pages/HomeDetailPage.scss'

function HomeDetailPage() {
    const { GetSelectedListingDetail, GetListingOwner, selectedListing, listingOwner } = useContext(DatabaseContext);
    const {
        address,
        bathrooms,
        bedrooms,
        creationDate,
        description,
        images,
        postKey,
        latitude,
        longitude,
        postRef,
        postUrl,
        poster,
        price,
        rawPrice,
        squareFeet,
        view_Count,
        isHighlighted
    } = selectedListing || '';

    const { email } = listingOwner || '';
    const params = useParams();

    const [isLoading, setIsLoading] = useState(true);

    const getImages = (images) => {
        return Object.values(images)
    }

    useEffect(() => {
        const { id } = params;
        GetSelectedListingDetail(id)
    }, [params]);

    useEffect(() => {
        if (selectedListing !== null) {
            setIsLoading(false);
        }
    }, [selectedListing]);

    useEffect(() => {
        if (poster) {
            GetListingOwner(poster)
        }
    }, [poster])

    if (isLoading && selectedListing === null) {
        return <progress className="progress is-small is-info" max="100">60%</progress>

    }

    const IMAGES =
    [{
            src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
            thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
            thumbnailWidth: 320,
            thumbnailHeight: 174,
            isSelected: true,
            caption: "After Rain (Jeshu John - designerspics.com)"
    },
    {
            src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
            thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
            thumbnailWidth: 320,
            thumbnailHeight: 212,
            tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
            caption: "Boats (Jeshu John - designerspics.com)"
    },
    
    {
            src: `${Object.values(images).toString()}` //doesn't load image
    }]


    return (
        <div className='detailBg'>
            <div className='home-detail-page'>
                <div className="home-detail-page-col-1">
                    {/*images go here */}
                    <Gallery images={Object.values([images])}/>
                </div>
                <div className="home-detail-page-col-2">
                    <div className="detailDiv">
                        <div className="propInfo">
                            <p className="title is-2 mb-5">{price}</p>
                            <p className="subtitle is-6 mb-2">{address}</p>
                            <p className="subtitle is-6">{bathrooms + ' ' + bedrooms + ' ' + squareFeet}</p>
                        </div>
                        <div className="contactBtn">
                            <a className="button is-info" href={`mailto:${email}`}>Contact Owner</a>
                        </div>
                        <div className="propDesc">
                            <p className="title is-5">Property Overview:</p>
                            <p className="title is-6 pb-4">
                                {description}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default HomeDetailPage;

Answer 1

You need at least src and thumbnail on each image. Here is the correct code:

<Gallery
  images={Object.values(images).map((url) => ({
    src: url,
    thumbnail: url
  }))}
/>

Working example

The library has not been updated for years. It only seems to work for React 16. I definitely don't recommend using it as is. Only if you fork and update everything.