Say I want to fetch someone's name from a firebase database to render in JSX for a React Native project. I want to render something as follows
return(
<View>
<Text>{name} retrieved data!</Text>
</View>)
Where name is some data stored in the realtime database. To get the "name" variable, I would need to make an async call to the database. However, I only want to render the JSX if I have the correct value for name. How can I go about doing this? I realize this is a simple example, but that was the point, as I spent hours trying to figure out the answer to a more complex version of this. When trying to do this, I would get an error since name was undefined at the time of rendering due to the async call to the database.
If you don't have the data yet, you can render something else while you're still loading.
For example something like:
if (!name) {
return null
}
return (
<View>
<Text>{name} retrieved data!</Text>
</View>
)
Some kind of loading indicator would probably be better than the null.