How to set Active class to Pagination element using NextJS with router?

Question

I currently have a pagination element in which I return an array of values:

const arrayPages = [1, 2, 3, 4, 5, 6, 7, 8]

Then I have made it look like this:

arrayPages.map((p, index) => (
  <li
    key={index}
    className={`page-item number-item ${
      arrayPages[index] === router.query.page ? `active` : ``
    }`}
  >
    <Link href={`${loadMoreParams.concat(`&page=${p}`)}`} passHref>
      <a className={`page-link`}>{p}</a>
    </Link>
  </li>
))

What I'm trying to do is to give the active class to the <li>...</li> element whenever the page from the router.query matches with the element value?. This is the line that is giving me troubles:

arrayPages[index] === router.query.page ? `active` : ``

Thanks in advance.

Answer 1

As my comment just to get this question closed off the answer is.

...
className={`page-item number-item ${p.toString() === router.query.page ? `active` : null}`}
...

Glad i could help:)