How to get data from a promise (async/await) and use it `outside` the promise?

Question

So I await for the promise to fulfil, then I want to use the resulting data outside of .then() or the async function.

function HomeScreen() {

    const userData = async () => { 
        await AsyncStorage.getItem("user_nicename")     
    }

    return (
        <View style={styles.container}>      
            <Text>Hello, { userData() } </Text>  //*I want to use it here for example*//

            <Button 
                style={styles.buttonLogin}
                onPress={() => navigation.navigate('LoginScreen')}
                title='Logout'
            />      
        </View>
    ) 
}

export default HomeScreen;

of course my code will throw an error because userData() is a 'promise object'. I just want the string value, which I have no problems accessing inside .then(data => ... ). But how do I access it outside so I can use it somewhere else?

Does this answer your question? [How to return the response from an asynchronous call](https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Samathingamajig, Jun 15 '22 at 23:30
Use states and then use it where ever you want, unless you want to use it globally, in that case learn about Global States — Liad, Jun 15 '22 at 23:35

score 2 · Answer 1 · answered Jun 15 '22 at 23:33

You to use useState and useEffect

import { useState, useEffect } from "react";

function HomeScreen() {
    const [userData, setUserData] = useState(undefined);

    useEffect(() => {
        (async () => {
            setUserData(await AsyncStorage.getItem("user_nicename"));
        })();
    }, []);

    return (
        <View style={styles.container}>      
            <Text>Hello, { userData } </Text>

            <Button 
                style={styles.buttonLogin}
                onPress={() => navigation.navigate('LoginScreen')}
                title='Logout'
            />      
        </View>
    ) 
}

export default HomeScreen;

How to get data from a promise (async/await) and use it `outside` the promise?

1 Answers1