[usePagination][material-ui] Next / Prev buttons don´t apply my onClick fuction

[KatuGT]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Create this component:

"use client";
import * as React from "react";
import usePagination from "@mui/material/usePagination";
import Link from "next/link";
import { useRouter } from "next/navigation";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

export default function CustomPaginationComponent({ count }) {
  const router = useRouter();

  const handlePageChange = (page) => {
    router.push(`/?page=${page}`);
    console.log("dfdsfdsf");
  };

  const { items } = usePagination({
    count: count,
  });

  return (
    <nav>
      <ul className="flex gap-4">
        {items.map(({ page, type, selected, ...item }, index) => {
          let children = null;

          if (type === "start-ellipsis" || type === "end-ellipsis") {
            children = "…";
          } else if (type === "page") {
            children = (
              <Link
                href={`?page=${page}`}           
                {...item}
              >
                {page}
              </Link>
            );
          } else {
            children = (
              <button
                type="button"
                onClick={() => handlePageChange(page)}
                {...item}
              >
                <ArrowBackIcon />
              </button>
            );
          }

          return <li key={index}>{children}</li>;
        })}
      </ul>
    </nav>
  );
}

2. use it enywhere you like

3. press the next or prev button

Current behavior 😯

  const handlePageChange = (page) => {
    router.push(`/?page=${page}`);
    console.log("dfdsfdsf");
  };
  

that fuction should be triggered but nothing happens

Expected behavior 🤔

i need the "page" url to change

http://localhost:3000/tienda?page=4

http://localhost:3000/tienda?page=5

http://localhost:3000/tienda?page=6
...etc

the styles of the current page change perfectly and If I click any of those numbers the "link" worf just fine en the url updates

Now I need the prev and next buttons to work too

Context 🔦

It is a ecommerce, I could make wotk the call to the api without sending the param "page" to the url but a better user experience I want it to work that way

so any user coud send to someone else "page 2" of whatever he is looking at

Your environment 🌎

npx @mui/envinfo

Tested on BRAVE and CHROME

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.3636.0), Chromium (119.0.2151.93)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.25 
    @mui/core-downloads-tracker:  5.14.19 
    @mui/icons-material: ^5.14.19 => 5.14.19
    @mui/material: ^5.14.19 => 5.14.19
    @mui/private-theming:  5.14.19
    @mui/styled-engine:  5.14.19
    @mui/system:  5.14.19
    @mui/types:  7.2.10
    @mui/utils:  5.14.19
    @types/react:  18.2.38
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript:  5.3.2

[mj12albert]

@KatuGT Could you provide a repro? Looks like you are using Next.js, you can fork this template: https://codesandbox.io/p/devbox/material-ui-next-js-app-router-mcve-z5jyhh

[shihabshahriyar]

@KatuGT, the issue had to do with how the props were ordered on the button component, and that the onClick event handler from the individual item from items array was not being triggered anywhere

This is what the revised code looks like:

"use client";
import * as React from "react";
import usePagination from "@mui/material/usePagination";
import Link from "next/link";
import { useRouter } from "next/navigation";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";

export default function CustomPaginationComponent({ count }) {
  const router = useRouter();

  const handlePageChange = (page, a) => {
    router.push(`/?page=${page}`);
    a();
  };

  console.log("Working");

  const { items } = usePagination({
    count: count,
  });

  return (
    <nav>
      <ul className="flex gap-4">
        {items.map((item, index) => {
          let children = null;
          // console.log(item);
          if (item.type === "start-ellipsis" || item.type === "end-ellipsis") {
            return <span key={index}>…</span>;
          } else if (item.type === "page") {
            return (
              <Link key={index} href={`?page=${item.page}`} {...item}>
                {item.page}
              </Link>
            );
          } else {
            return (
              <button
                key={index}
                {...item}
                onClick={() => handlePageChange(item.page, item.onClick)}
              >
                <ArrowBackIcon />
              </button>
            );
          }
        })}
      </ul>
    </nav>
  );
}

Link since it's not formatting correctly: https://codesandbox.io/p/devbox/condescending-dijkstra-d44mk2?file=%2Fsrc%2Fapp%2FCustomPagination.tsx%3A1%2C1-52%2C1

1. Since you were passing {...items} after your custom onClick handler, the onClick handler restructured from ...items was overwriting your onClick handler "onClick={() => handlePageChange(page)}"
2. You'll also have to execute the onClick handler passed from item, by passing in as an argument in handlePageChange().

Hope this helps

[mj12albert]

Thanks @shihabshahriyar for looking into this ~ I will close this for now

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[KatuGT]

Genio! @shihabshahriyar

Now it´s working! thank yooouuu!!