React Firebase Callback - reactjs

Question

I started learning React using Firebase about one year ago, and it's all going pretty well, I guess. However, ever since I started writing, I really miss mastering the art of callbacks like I did with Swift.
I feel that there's barely any information that's going straight to the point regarding callbacks and Firebase using React. For instance, there has been so many times I want to be able to use callbacks, but have ended up writing numerous extra functions to perform the exact same task. For instance, I want to be able to call a function, and then return a value inside a Snapshot.once. But how?
You see, this is an example of an issue I'm facing at this very moment. I'm currently mapping out a list of users on my website, with the following information: firstname, lastname and companyId. Upon display, I want to be able to verify that the companyId does in fact exist in a separate table called 'Companies' structured like this:
Companies -> uniqueCompanyId -> information
I know that I can't return values in an async function, but this is what I am thinking about:
isCompanyVerified(input){
databaseCompanies.child(input).once('value', (snapshot) => {
if(snapshot.val().isVerified){
return true;
} else {
return false;
}
})
}
<div>
allUsers.map((singleUser) => {
return(
<p>{singleUser.name}</p>
<p>{this.isCompanyVerified(singleUser.companyId)}</p>
)
})
</div>
It would really mean the world to me if someone could explain to me how I would do this the correct way, or at least point me in the right direction. The problem is that I honestly don't know where to seek information.
I'm used to having code structured with having all networking/database functions in one file, like I did in Swift called ex. 'Networking.swift'. And then do function calls that I fetch from the specific file. Using React, I have ended up having all of my code in each Component, resulting in a lot of duplicated code, a lot of extra work and making it all look unstructured.
I'm fairly familiar to the syntax right now, and I do believe I have learned a lot, yet - I feel that I do numerous things the wrong way, and still have a lot to learn. Where would be the best place for me to learn to really master React? Going from intermediate to an 'experienced' (writing and structuring React code like it's supposed to be done).
All help is appreciated. I'm making this post as I really want to put in the effort to learn.

Answer 1

You cannot directly write the dom in react like this. The dom is not being re-rendered in this case. Store the verification data in a state and the dom is being re-rendered as soon as the async data arrived.
SOLUTION 1
This is an implementation of a single UserItem component:
UserItem.js
class UserItem extends React.Component {
state {
isUserVerified: false
}
handleVerified = snapshot => {
this.setState({ isUserVerified: snapshot.val().isVerified })
}
componentDidMount {
const {userId} = this.props;
databaseCompanies.child(userId).once('value', this.handleVerified)
}
render() {
const { isUserVerified } = this.state;
return (
<div>{isUserVerified ? 'verified' : 'not verified'}</div>
)
}
}
UserList.js
...
render(){
allUsers.map(singleUser => <UserItem userId={singleUser.id} />
}
SOLUTION 2
If you'd like to list all the users, get a snapshot from the complete users object
componentDidMount {
databaseCompanies.child('users').once('value', this.handleStoreUsers)
}
This will result something like this in the state:
state = {
users: {
_key1: { id..., verified: true },
_key2: { id..., verified: false }
...
}
}
And map trough them.