How to refactor my code, so the h2 header renders only when needed?

I have simple react component where I render a list of hotels. I fetch data from firebase. I added a statement which I want to render ONLY when there aren't any hotels on list. Currently this h2 tag renders every time when I refresh the browser, or click on the go back button. Could you please kindly advise how can I make it to render only when needed?

import { DocumentData, onSnapshot, QuerySnapshot } from "firebase/firestore";
import { useEffect, useState } from "react";
import { hotelsCollection } from "../lib/controller";
import { NewHotelType } from "../types/hotel";
import Information from "./Information";
function Hotel() {
const [hotels, setHotels] = useState<NewHotelType[]>([]);
const [search, setSearch] = useState("")
const [sortState, setSortState] = useState("");
const [isLoading, setIsLoading] = useState(false);
useEffect(
() =>
onSnapshot(hotelsCollection, (snapshot: QuerySnapshot<DocumentData>) => {
setHotels(
snapshot.docs.map(doc => {
return {
id: doc.id,
...doc.data(),
};
})
);
}),
[]
);
if(isLoading) return <div>Loading..</div>
return (
<div className="card">
<select
className="select"
defaultValue={""}
onChange={(e) => setSortState(e.target.value)}
>
<option value="disabled">Filter By</option>
<option value="name">Name</option>
<option value="price">Price</option>
</select>
<div className="search">
<input
className="inputsearch"
value={search}
type="text"
placeholder="Search for the hotel"
onChange={(e) => setSearch(e.target.value)}
/>
</div>
{hotels && hotels.length ? (
<div>
{hotels
?.filter((item: NewHotelType) => {
if (search === "" && !search.length) {
return item;
}
return item?.title === search;
})
.sort((a, b) => {
if (sortState === "name") {
if (a.title && b.title) return a.title.localeCompare(b.title);
}
if (sortState === "price") {
return Number(a.perNight) - Number(b.perNight);
}
return 0;
})
?.map((hotel: NewHotelType) => (
<Information key={hotel.id} hotel={hotel} />
))}
</div>
) : !isLoading ? (
<h2 className="no-hotels">There are no hotels. Please add one</h2>
) : <div>Loading..</div>}
</div>
);
}
export default Hotel;

What you've done is correct. What you need, is to manage the loading state as well. When your component first renders your hotels state is an empty array, so till it gets filled by the data, you need to show a Loader, that way you make sure that the title is only rendering when the array is empty and the data has finished loading.

One way of doing it, is having a loading state that you set initially to true. and once your snapshot is successful and you pushed the data to the state, you will set the loading to false. In other words, after setHotels(...) you want to setLoading to false.

Now in your JSX you want to add a short circuit for the loading state,eg: if(loading) return <Loader />

Update:

function Hotel() {
const [hotels, setHotels] = useState<NewHotelType[]>([]);
const [search, setSearch] = useState("");
const [sortState, setSortState] = useState("");
const [isLoading, setIsLoading] = useState(true);
useEffect(
() =>
onSnapshot(hotelsCollection, (snapshot: QuerySnapshot<DocumentData>) => {
setHotels(
snapshot.docs.map((doc) => {
return {
id: doc.id,
...doc.data(),
};
})
);
setIsLoading(false)
}),
[]
);
if (isLoading) return <div>Loading..</div>;
return (
<div className="card">
<select
className="select"
defaultValue={""}
onChange={(e) => setSortState(e.target.value)}
>
<option value="disabled">Filter By</option>
<option value="name">Name</option>
<option value="price">Price</option>
</select>
<div className="search">
<input
className="inputsearch"
value={search}
type="text"
placeholder="Search for the hotel"
onChange={(e) => setSearch(e.target.value)}
/>
</div>
{hotels && hotels.length ? (
<div>
{hotels
?.filter((item: NewHotelType) => {
if (search === "" && !search.length) {
return item;
}
return item?.title === search;
})
.sort((a, b) => {
if (sortState === "name") {
if (a.title && b.title) return a.title.localeCompare(b.title);
}
if (sortState === "price") {
return Number(a.perNight) - Number(b.perNight);
}
return 0;
})
?.map((hotel: NewHotelType) => (
<Information key={hotel.id} hotel={hotel} />
))}
</div>
) : (
<h2 className="no-hotels">There are no hotels. Please add one</h2>
)}
</div>
);
}