React Firebase data is undefined - reactjs

Question

I'm trying to build a fintech website, and I have a users collection and a transactions collection. One user can send money to another user by using their phone number.
The user schema contains these
uid - string
phone - string
.....//other data
I need to achieve the following functionality
Enter phone number of target receiver
Get details of user with the entered phone number
Add this data to another collection called transactions
I tried doing that, but I'm getting a bug that in the 3rd step, the data from the 2nd step is undefined. Here's my code
const SendMoney = () => {
const [receiverDetails, setRecieverDetails] = useState({})
const [allUsers, setAllUsers] = useState([])
const [receiverphone, setReceiverphone] = useState('')
const usersCollectionRef = collection(db, "users")
const getAllUsers = async () => {
const data = await getDocs(usersCollectionRef)
setAllUsers(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })))
}
useEffect(() => {
getAllUsers()
}, [])
const getRecieverDetails = (phone) => {
const receiver = allUsers.filter(u => u.phone === phone)[0]
setRecieverDetails(receiver)
}
const makeTransaction = async () => {
getRecieverDetails(receiverphone)
console.log(receiverDetails) --------> prints {}
const transactionsCollectionRef = collection(db, "transactions")
await addDoc(transactionsCollectionRef,
{
toUser: receiverDetails.uid,
//other data
}
)
}
return (
<div>
<h2>Send money</h2>
<input placeholder='phone number' onChange={e => setReceiverphone(e.target.value)} />
<input type="number" onChange={e => setAmount(e.target.value)} />
<button onClick={makeTransaction}>send money</button>
</div>
)
}
export default SendMoney
My guess is that the addDoc function is called before the receiverDetails gets populated with data. I am not sure how to fix this bug

Answer 1

Calls to setState or the setter of a useState hook are asynchronous.
Don't use state to pass data between your own pieces of code, but instead use normal variables, and promises or async/await to synchronize.
const SendMoney = () => {
const [receiverDetails, setRecieverDetails] = useState({})
const [allUsers, setAllUsers] = useState([])
const [receiverphone, setReceiverphone] = useState('')
let users; // 👈 new variable
const usersCollectionRef = collection(db, "users")
const getAllUsers = async () => {
const data = await getDocs(usersCollectionRef)
users = data.docs.map((doc) => ({ ...doc.data(), id: doc.id })); // 👈 This is synchronouse
setAllUsers(users); // 👈 This is asynchronous
}
useEffect(() => {
}, [])
const getRecieverDetails = (phone) => {
await getAllUsers()
const receiver = users.filter(u => u.phone === phone)[0]
setRecieverDetails(receiver)
}