Seeking assistance with a coding issue. I am puzzled as to why I am unable to utilize the data returned from an API call outside of its function, even though there are no errors occurring. The fetchUser function successfully retrieves the data from the API, but I am struggling to access this data in my JSX code. Below is the snippet of code for the API call:
export default function Dashboard({ session }) {
const fetchUser = async () => {
try {
const baseUrl = `/api/user`;
let response = await fetch(baseUrl);
const data = await response.json();
console.log(data); //Data came back as expected as such ' [{…}] '
return data;
} catch (error) {
console.log(error);
}
return (
<>
...
</>
)
};
console.log(fetchUser());
When attempting to access the data outside of the function, I am encountering the following message in the console:
Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(1)
I simply want to receive the array and work with it, without dealing with the complexities of promises. Any guidance on how to achieve this would be greatly appreciated. Thank you.