Retrun a value from another component?

Question

can someone explain to me how can I return a value from another component?

I tried the following:

const ReturnText = () => {
  return 'Returend text'
}
    
export default ReturnText;

And i try to call it in Foo like this

import ReturnText from '../ReturnText'
    
let someText;
const Foo = (props) => {
  someText = ReturnText()
  console.log(someText) // is shown as undefined in the debugger
}

But when I try to log the someText variable I get undifend.

EDIT:

It seems the code above works. but maybe I oversimplified my issue:

Here is my actual code (that I thought is identical)

import Geolocation from "react-native-geolocation-service";
    
let hasLocationPermission = true;
    
const LocateMe = () => {
  if (hasLocationPermission) {
    Geolocation.getCurrentPosition(
      (position) => {
        console.log(position);
        return position;
      },
      (error) => {
        // See error code charts below.
        console.log(error.code, error.message);
      },
      { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
    );
  }
}
    
export default LocateMe;

I try to call the LocateMe in Foo and assign the returned position to a variable (ant that variable gives me undefined)

I tried same code in react and I got "Returned text" in the console. link https://stackblitz.com/edit/react-ts-krdapz?file=index.tsx — Maharajan, Sep 05 '21 at 21:27
Are you sure that import is correct? Where's the file? Maybe `import ReturnText from './ReturnText'`? — Andy, Sep 05 '21 at 21:39
@Maharajan i might have oversimplified (see my EDIT in the question please) — masky007, Sep 05 '21 at 21:43
`LocateMe` isn't returning a value. You're only trying to return a value from the async callback. — Andy, Sep 05 '21 at 21:44
@Andy But i also tried to set a variable outside the IF and than return it at the end (i assign that variable where i currently have `return position` — masky007, Sep 05 '21 at 21:53

Andy · Accepted Answer · 2021-09-05T22:30:13.637

0

Because getCurrentPosition is an async process wrap the code in a promise and return that. It will resolve the promise with the data when the process is complete.

You can then decide if you want to use async/await or a traditional then to access the data when its returned.

function locateMe() {

  const config = { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 };

  return new Promise((res, rej) => {
  
    function success(position) {
      res(position);
    }

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

    if (hasLocationPermission) {
      Geolocation.getCurrentPosition(success, error, config);
    }

  });

}

Either async/await:

(async () => {
  const position = await locateMe();
  console.log(position);
})();

Or then:

locateMe().then(coords => console.log(coords));

edited Sep 05 '21 at 22:30

answered Sep 05 '21 at 22:00

Andy

61,948
13
68
95

Can you please update your answer how to assign the `locateMe().then(coords => console.log(coords));` to a variable, then console.log() that variable? (Your code above works though, i just can't figure out how to assign this to a variable) – masky007 Sep 05 '21 at 22:18
[You have to structure your code](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) so that it takes into account the asynchronous nature of the promise. You can't define a variable, and then log it before the promise returns. – Andy Sep 05 '21 at 22:28
1

Ahh okay! I got it settled with useState like so `LocateMe().then(coords => setUserLocation(coords));` Thank you! – masky007 Sep 05 '21 at 22:32
Magic. Glad I could help @masky007. – Andy Sep 05 '21 at 22:33

score 0 · Answer 2 · answered Sep 05 '21 at 22:07

From what I see the problem is here that you try to return from a callback function Geolocation.getCurrentPosition which will do nothing and it is expected.

The thing is, if an inner function call is asynchronous, then all the functions 'wrapping' this call must also be asynchronous to 'return' a response.

To get the value from LocateMe I would pass the callback function as a parameter like:

const LocateMe = (callback) =>

And instead of

return position

You do

callback(position)

And then in Foo, you get that value and do whatever you need to do with it.

Retrun a value from another component?

2 Answers2