TypeError: urls.map is not a function in React

Question

I have to issue in displaying the image in react. List of all Image urls in get from firebase storage.Passing all the urls display the image shows urls.map is not a function

const ViewImages = () => {

var storageRef = firebase.storage().ref("images/");

const [image, setImage] = useState(""); const [urls, setFiles] = useState("");

const [imageUrl, setImageUrl] = useState([]);

useEffect(() => { const fetchImages = async () => {

let result = await storageRef.child('images1/').listAll();
    let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL());
 
    return Promise.all(urlPromises);
    //console.log(urlPromises);

}

const loadImages = async () => {
    const urls = await fetchImages();
    setFiles(urls);
    console.log(urls[0]);
}
loadImages();
}, []);

return(

      {urls.map((urls,i) => (
          <img src={urls} key={i}/>
      ))} 
     
  </div>

);

}

export default ViewImages;

Arun Kumar Mohan · Accepted Answer · 2021-03-20 07:05:57Z

2

The issue is you're calling the map method on an empty string ('') which is the initial value of urls. Set it to an empty array instead.

const [urls, setFiles] = useState([])

answered Mar 20, 2021 at 7:05

Arun Kumar Mohan

11.9k3 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeError: urls.map is not a function in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related