How to pass the download URL from firebase storage to local state in react

Asked Nov 21 '20 at 15:44

Active Dec 02 '20 at 02:23

Viewed 21 times

I'm having this function that downloads an image from firebase storage.

() => {
        // gets the functions from storage refences the image storage in firebase by the children
        // gets the download url then sets the image from firebase as the value for the imgUrl:
        storage
          .ref(`images/${user?.uid}`)
          .child(ImgAsFile.name)
          .getDownloadURL()
          .then((fireBaseImgUrl) => {
            setImgUrl(fireBaseImgUrl);
            console.log("ImgUrl: ", ImgUrl);
            console.log("FireBaseImgUrl: ", fireBaseImgUrl);
            history.push("/home");
          });

Where setImgUrl is a state Modifier of state variable ImgUrl This is what the state variable I have defined

  const [ImgUrl, setImgUrl] = useState("");

But I don't know why ImgUrl is not getting the downloaded URL but I can see fireBaseImgUrl getting the desired URL.

edited Nov 21 '20 at 15:47

asked Nov 21 '20 at 15:44

Soumalya Bhattacharya

Does your function have access to `setImgUrl`? – jmargolisvt Nov 21 '20 at 15:47
yes it has access to it – Soumalya Bhattacharya Nov 21 '20 at 15:48
should I provide you my entire code ? – Soumalya Bhattacharya Nov 21 '20 at 15:49
No, you should provide only what's needed to debug it. There may be more needed than what you have, but please don't dump everything. How are you testing that `setImgUrl` is not working? It's an async function, so depending on how you are testing it, you might not see the result right away. – jmargolisvt Nov 21 '20 at 15:51
1

look at this: https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately – realtimez Nov 21 '20 at 15:55
See there are 2 console logs at the end there is where I'm testing it – Soumalya Bhattacharya Nov 21 '20 at 15:55
Then I think I should use useEffect what do you say > – Soumalya Bhattacharya Nov 21 '20 at 15:56
The variable from the state hook will not get assigned immediately. It will have the value you set the next time the component renders, which will happen after the current render returns. – Doug Stevenson Nov 21 '20 at 16:18

How to pass the download URL from firebase storage to local state in react

0 Answers0