Returning value from a function in react

Question

When I'm trying to return my res.data from my function and then console.log it I get undefined but if I console.log it from inside the function I get the normal result

const getDefaultState = () => {
  axios
    .get("http://localhost:5000/urls/todos")
    .then((res) => {
      if (res.data) {
        console.log(res.data);
        return res.data;
      }
    })
    .catch((err) => console.log(err));
};


console.log(getDefaultState());

so I get first

(3) [{…}, {…}, {…}]

(the normal value) but then from outside I get

undefined

As @SirwanAfifi suggests it, you get undefined because when you console.log(getDefaultState()), your request is still processing. See this — Xapadoan
– Xapadoan, Commented Sep 17, 2020 at 12:42
Please be aware that getDefaultState will never return the "real" value. The best you can do is have it return a promise. — Felix Kling
– Felix Kling, Commented Sep 17, 2020 at 12:48

Jai · Accepted Answer · 2020-09-17 12:45:26Z

1

You need to return the call as well:

const getDefaultState = () => {
  return axios.get("http://localhost:5000/urls/todos")
        .then((res) => {
           if (res.data) {
              console.log(res.data);
              return res.data;
           }
  }).catch((err) => console.log(err));
}

answered Sep 17, 2020 at 12:45

Jai

74.8k12 gold badges76 silver badges104 bronze badges

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

Comments

eloyra · Accepted Answer · 2020-09-17 12:42:46Z

0

You should return the promise instead.

const getDefaultState = () =>
  axios
    .get("http://localhost:5000/urls/todos")
    .then((res) => {
      if (res.data) {
        console.log(res.data);
        return res.data;
      }
    })
    .catch((err) => console.log(err));

That way you can listen to the result outside the function:

getDefaultState().then(/* do stuff */);
// or
const res = await getDefaultState();

answered Sep 17, 2020 at 12:42

eloyra

5292 silver badges6 bronze badges

3 Comments

eloyra Over a year ago

Bear in mind that since there are cases where you don't return anything inside the 'then' clause and you never return anything in the 'catch' clause, you could still get undefined/null. But as long as the promise resolves correctly and there is data, you will recieve it this way.

Xapadoan Over a year ago

Don't forget async if you want to use await

Felix Kling Over a year ago

You mind want to point out what it is you changed (removed the brackets).

Collectives™ on Stack Overflow

Returning value from a function in react

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related