I have problem to render data after API fetch because I have two apis and the second api call depend on first api ID - reactjs

Question

App.tsx
export interface Hotel {
id: string;
name: string;
address1: string;
address2: string;
starRating: number;
images: string[];
longDescription: string;
}
// currently not using types but may be it should be like that
export interface Hotel {
id: string;
name: string;
address1: string;
address2: string;
starRating: number;
images: string[];
longDescription: string;
room: {
id: string;
name: string;
longDescription: string;
occupancy: {
maxAdults: number;
maxChildren: number;
maxOverall: number;
};
};
}
//
export interface Room {
id: string;
name: string;
longDescription: string;
}
const App: React.FC = () => {
// const [loading, setLoading] = useState<boolean>(false);
const [hotels, setHotels] = useState<Hotel[]>([]);
const [rooms, setRooms] = useState<Room[]>([]);
useEffect(() => {
const getData = async () => {
const { data: hotels } = await axios.get<Hotel[]>(
'https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG'
);
const allRooms = await Promise.all(
hotels.map(async ({ id }) => {
// don't forget to provide a type for the response
const {
data: { rooms },
} = await axios.get<{ rooms: Room[] }>(
`https://obmng.dbm.guestline.net/api/roomRates/OBMNG/${id}`
);
return rooms;
})
);
console.log(hotels);
console.log(allRooms.flat());
setHotels(hotels);
setRooms(allRooms.flat());
};
getData();
}, []);
return (
<div>
<GlobalStyle />
<ImageWrapper>
<BrandTitle>Book Your Stay</BrandTitle>
<BrandSubtitle>make yourself comfortable with us</BrandSubtitle>
</ImageWrapper>
<HotelCard hotels={hotels} rooms={rooms} />-
</div>
);
};
HotelCard.tsx
interface HotelListProps {
hotels: Hotel[];
rooms: Room[];
}
const HotelCard: React.FC<HotelListProps> = ({ hotels, rooms }) => {
return (
<div>
{hotels.map((hotel) => (
<div key={hotel.id}>
<h1>{hotel.id}</h1>
// more code
</div>
))}
{rooms.map((room) => (
<div key={room.id}>
<h1>{room.name}</h1>
// more here...
</div>
))}
</div>
);
};
export default HotelCard;
In this code I get result like all hotels from first api and then I use id which I got from first api call and use that one in second api request. I stored both api response in different state(hotels, rooms). but i got different result in screen. I need to render like, first hotel1 then 3 rooms of hotel1 then again hotel2 and 3 rooms of hotel2 and rest of them same, but rightnow I got first hotel then all rooms together. how to achieve that? I am really confuse about that could anyone help me? I will really thankful for that?

Answer 1

First organize your data into the structure you want
const joined = hotels.map(h => {
hotel: h,
rooms: rooms.filter(r => r.hotelId === h.id), // Or however your docs are linked
});
// Then
joined.map(j => <>
<h1>{j.hotel.id}</h1>
{j.rooms.slice(0, 2).map(r => <h1>{r.id}</h1>)}
</>);