How can I use a show more posts button - reactjs

Question

I just wan't to hide show more posts button if there aren't any posts. so I created showLoad function and isLoad state but I have no idea how to use this.
the show button is on the isLoad ? section. thank you for your help!
posts.tsx
const [loadMore, setLoadMore] = useState<number>(4);
const [activeMenu, setActiveMenu] = useState<string>("All");
const [isLoad, setIsLoad] = useState(false);
function getFilteredList() {
if (activeMenu === "All") {
return projectschema;
}
return projectschema.filter(
(project) => project.categories.title === activeMenu
);
}
const showMoreItems = () => {
setLoadMore((prevValue) => prevValue + 4);
};
useEffect(() => {
const showLoadButton = () => {
if (loadMore > 4) {
setIsLoad(true);
}
};
showLoadButton();
}, [loadMore]);
const filteredList = useMemo(getFilteredList, [activeMenu, projectschema]);
{filteredList.slice(0, loadMore).map((project) => (
<Link
key={project._id}
>
<section className={styles.project__item}>
test
</section>
</Link>
))}
{isLoad ? (
<>
<div className={styles.load__more}>
<div className={styles.load__icon} onClick={showMoreItems}>
<SVGCustomIcon name="LoadMore" />
</div>
</div>
</>
) : (
""
)}

Answer 1

you don't need to use isLoad state, you can check if the filteredList.length > 4 and loadMore <= filteredList.length), so your loadMore icon will be showed otherwise hidden.
{((filteredList.length > 4) && (loadMore <= filteredList.length)) ? (
<>
<div className={styles.load__more}>
<div className={styles.load__icon} onClick={showMoreItems}>
<SVGCustomIcon name="LoadMore" />
</div>
</div>
</>
) : (
""
)}