'AWS Auth - useState Failure After Fetch

I still considered myself a newbie to React, AWS, as well as here, so forgive me if the format is not proper or if the question is not clear but I try my best.

I fetch user data on one React component and try to set user email as follows:

    const [email, setEmail] = useState("") //used for signup confirmation

    useEffect(() => {
        Auth.currentAuthenticatedUser({
            bypassCache: false //if true, it will call the latest user data.
        }).then(
            user => {
                console.log(user.attributes.email); //this one returns the e-mail address
                setEmail(user.attributes.email); // this one is supposed to setEmail to the e-mail address
                console.log(email); // this one returns empty string.
            })
            .catch(err => console.log(err));
    }, []);

I tried to generate a function outside useEffect, built an API and called user details from the API but nothing helped. Somehow it doesn't pull the e-mail detail. What am I doing wrong? Do you think it's an async/await fallacy or rather related to AWS API?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source