ReactJs only rendering one img element from mapping an array of URLs

Question

I am reading image data from firebase storage and getting the URLs of the images in an array. I console logged the array. It is fine.

I made a variable of img elements through map() function on that array.

That variable is also fine.

But I am not able to render more than one in the component. Only the last image tag renders from the array.

import React, { useRef, useState, useEffect } from 'react'
import { Card, Button, Alert } from 'react-bootstrap'
import { Link, useHistory } from 'react-router-dom'
import { UseAuth } from '../context/AuthContex'
import app from './../firebase'
import { db } from './../firebase'
import './Dashboard.css'


function Dashboard() {

    const [error, setError] = useState('')
    const { currentUser, logout } = UseAuth()
    const history = useHistory()
    const picURLS = []
    const [photo, setPhoto] = useState()

    async function getPics() {
        const DBRef = db.collection('pics');
        const snapshot = await DBRef.where('author', '==', currentUser.uid).get();
        if (snapshot.empty) {
            console.log('No matching documents.');
            return;
        }

        snapshot.forEach(doc => {
            var storage = app.storage();
            var gsReference = storage.refFromURL('<bucket address>' + doc.data().filename)
            gsReference.getDownloadURL().then(function (url) {
                picURLS.push(url);

            }).catch(function (error) {
                console.log(error)
            });
        });
    }

    useEffect(() => {
        getPics()
        console.log('getPIcs() triggered.')
        console.log(picURLS)
        setPhoto(picURLS.map(postdata => (
            <img className='photoOfOrder' key={postdata} src={postdata} alt={postdata} />)))
        console.log(photo)
       

    }, [])



    return (
        <div>
            <div>{photo}</div>
            <div className="menu pmd-floating-action" role="navigation">
                <Link to='/upload-pic' className="pmd-floating-action-btn btn pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-primary" data-title="Splash New Image?" href="javascript:void(0);">
                    <span className="pmd-floating-hidden">Primary</span>
                    <i className="material-icons pmd-sm">add</i>
                </Link>
            </div>
        </div>


    )
}

export default Dashboard

Ryu · Accepted Answer · 2020-11-15 09:37:20Z

It would be better to add picURLS to your state variables because useEffect runs only once with empty dependencies array and setPhoto(picURLS.map) surely would work with an empty picURLS array before it will be filled. So your photo var surely would be empty. You should call your map in the render function;

{picURLS.map(postdata => (
            <img className='photoOfOrder' key={postdata} src={postdata} alt={postdata} />))}

Try this code

import React, { useRef, useState, useEffect } from 'react'
import { Card, Button, Alert } from 'react-bootstrap'
import { Link, useHistory } from 'react-router-dom'
import { UseAuth } from '../context/AuthContex'
import app from './../firebase'
import { db } from './../firebase'
import './Dashboard.css'


function Dashboard() {

    const [error, setError] = useState('')
    const { currentUser, logout } = UseAuth()
    const history = useHistory()
    const [picURLS, setPicURLS] = useState([])

    async function getPics() {
        const DBRef = db.collection('pics');
        const snapshot = await DBRef.where('author', '==', currentUser.uid).get();
        if (snapshot.empty) {
            console.log('No matching documents.');
            return;
        }

        const newUrls = [];
        snapshot.forEach(doc => {
            var storage = app.storage();
            var gsReference = storage.refFromURL('<bucket address>' + doc.data().filename)
            gsReference.getDownloadURL().then(function (url) {
                newUrls.push(url);

            }).catch(function (error) {
                console.log(error)
            });
        });
       setPicURLS(newUrls);
    }

    useEffect(() => {
        getPics()
        console.log('getPIcs() triggered.')
        console.log(picURLS)
    
    }, [])



    return (
        <div>
            <div>{
                   picURLS.map(postdata => (
                     <img className='photoOfOrder' key={postdata} src={postdata} alt={postdata} />))}
            </div>
            <div className="menu pmd-floating-action" role="navigation">
                <Link to='/upload-pic' className="pmd-floating-action-btn btn pmd-btn-fab pmd-btn-raised pmd-ripple-effect btn-primary" data-title="Splash New Image?" href="javascript:void(0);">
                    <span className="pmd-floating-hidden">Primary</span>
                    <i className="material-icons pmd-sm">add</i>
                </Link>
            </div>
        </div>


    )
}

export default Dashboard

It is showing in the state, that is the state is successfully set to URLs. But the render is not showing. That the main issue.

Jake Jeon · Accepted Answer · 2020-11-15 10:15:01Z

0

photo is array of React components. you need to loop over photo using map array method again to show in render.

{photo.map((img) => { img }}

edited Nov 15, 2020 at 10:15

answered Nov 15, 2020 at 9:50

Jake Jeon

1731 gold badge3 silver badges9 bronze badges

Collectives™ on Stack Overflow

ReactJs only rendering one img element from mapping an array of URLs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related