Using a function inside .map() in React , does not work properly - reactjs

Question

I tried using a function inside the map() function but yet it does not give the output required. I will explain the problem after these code sections.
map function code segment
{bookings.map((booking) =>(
<tr>
<th scope = "row">{number++}</th>
<td>{booking.tourId}</td>
<td>{booking.bookingDate}</td>
<td>{booking.arrivalDate}</td>
<td>{booking.country}</td>
<td>{GuideAssigned(booking.tourId)}</td>
<td><Button color="warning" style = {{padding: "5px 5px 5px 5px" , width : "80px" , marginBottom : "8px"}}
onClick = {()=>{
history.push(`/assign-guide/${booking.username}`);
}}
>Assign Guide</Button>
</td>
</tr>
))}
The problem here is that the function gets called only for one tour ID , which is the first one in the table.The function does not get called for the other Tour ID's.Am I doing something wrong here?
Below is the function called
function GuideAssigned(tid){
axios.get(`http://localhost:8070/assignedGuides/get/${tid}`).then((res)=>{
console.log(res.data.guideId);
setGuide(res.data.guideId);
if (typeof guide == 'undefined'){
return "Not Assigned";
}
}).catch((err)=>{
console.log(err);
})
return guide;
}
This works only for the first tour ID which gets passed as you can see below.(Guide Assigned field is same for all).

Answer 1

You can't call asynchronous code in the render of a React component. The reason they are all the same is likely because you've one guide state, set by setGuide(res.data.guideId);, and it's also very likely it's the last mapped element setting this value since it's the last to do a GET request.
You will want to make these GET requests when the bookings array reference updates. Use an useEffect hook for this.
const [guides, setGuides] = useState({});
useEffect(() => {
bookings.forEach(({ tourId }) => {
axios.get(`http://localhost:8070/assignedGuides/get/${tourId}`)
.then(res => {
setGuides(guides => ({
...guides,
[tourId]: res.data.guideId,
}));
})
});
}, [bookings]);
Use the mapped tourId to access the correct guides guideId value.
{bookings.map((booking) =>(
<tr>
...
<td>{guides[booking.tourId]}</td> // <-- access guide id by tour id
...
</tr>
))}