Accessing variable outside a function in React JS Frontend

Question

I have written this code to access my variable outside the function.The value of res outside the function is undefined. the outside console.log should print the url which is assigned to res inside the function. I will use this response in my anchor tag to open the url in res variable. What am I doing wrong?

const firebaseApp = initializeApp(firebaseconfig)
const storage = getStorage(firebaseApp)
var res;
  const downloadurl = function() { getDownloadURL(ref(storage, 'files/linpeas.txt'))
    .then((url) => {
       res = url
       console.log(res)
    })};
      
console.log(res)

I do not see nothing wrong with the code. The console.log() outside de function should return undefined but the one inside the function should return the info. Try adding a .catch() to show if there is some error — S.Marx
– S.Marx, Commented Mar 25, 2022 at 19:11
the outside console.log is printing undefined whereas it should print the url the is assigned to res inside the function — Hassan Turi
– Hassan Turi, Commented Mar 25, 2022 at 19:15
Can you please provide more information? I think the function getDownloadURL is async so that the value (url) will be assigned to res when the function is executed or completed but the console log will run before executing the function. — Shiva Aryal
– Shiva Aryal, Commented Mar 25, 2022 at 19:27

S.Marx · Accepted Answer · 2022-03-25 20:04:07Z

1

Try using the useState() to store res and the useEffect() to update res when this changes;

const firebaseApp = initializeApp(firebaseconfig)
const storage = getStorage(firebaseApp)
const [res, setRes] = useState();

const downloadurl = () => { getDownloadURL(ref(storage, 'files/linpeas.txt'))
    .then((url) => {
       setRes(url);
       console.log(res)
    })
    .catch((error) => console.log(error));
};
      
useEffect(() => {
    console.log(res);
  }, [res]);

edited Mar 25, 2022 at 20:04

answered Mar 25, 2022 at 19:24

S.Marx

1,03211 silver badges17 bronze badges

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

4 Comments

Hassan Turi Over a year ago

not working again same undefined

Hassan Turi Over a year ago

I am not using useEffect as I am using this url in anchor tag to move to the url

S.Marx Over a year ago

If you can put more code or give more details would be useful

Hassan Turi Over a year ago

I have updated the question

Collectives™ on Stack Overflow

Accessing variable outside a function in React JS Frontend

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related