How can I use a show more posts button-CodePudding

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>
              </>
            ) : (
              ""
            )}

CodePudding user response：

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>
    </>
  ) : (
    ""
)}