How to change color when Item of paginate is active in ReactJS?

Question

I am rendering a list of elements and doing pagination, each page of my list contains 3 elements.

Pagination is working correctly. But I don't know how to change the color of the active pagination item so that the user knows which page it is on.

Can you tell me how I can do that?

Here's my code I put into codesandbox

For example, in the photo above, the active page is 2. But there is no indication of that.

Thank you in advance.

Answer 1

You can add classes dynamically on your map function, so that the current page receives an additional class:

The return method of the Card component:

return (
    <div>
      {currentPerfumes.map((item) => (
        <CardItem key={item.id} item={item} />
      ))}
      <div className={classes.page}>
        <div className={classes.pageContent}>
          {pageNumbers.map((page, index) => {
            const spanClasses = [classes.pageNumber]; // list of classes
            if (index === currentPage - 1) // if we are on current page
              spanClasses.push(classes.activePage); // add an additional class
            return (
              <span
                key={page}
                id={page}
                onClick={() => handleClick(page)}
                className={spanClasses.join(" ")}
              >
                {page}
              </span>
            );
          })}
        </div>
      </div>
    </div>
  );

The styles.js has a new style, activePage :

import { makeStyles } from "@material-ui/core";

export const useStyles = makeStyles({
  page: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  pageContent: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    width: "20%"
  },
  pageNumber: {
    cursor: "pointer",
    backgroundColor: "#ff8f32",
    color: "#fff",
    fontSize: "24px",
    width: "20px",
    textAlign: "center"
  },
  activePage: {
    backgroundColor: "blue"
  }
});

See this in action here .

Answer 2

Inside your map function, you can set an active className on the condition that page === currentPage

          {pageNumbers.map((page) => (
            <span
              key={page}
              id={page}
              onClick={() => handleClick(page)}
              className={page === currentPage ? classes.activePageNumber : classes.pageNumber}
            >
              {page}
            </span>
          ))}

Answer 3

When you are mapping over you pages you can add the index of each iteration, and then instead of giving your default class to it, you can check if the index equals to the current page. Like this:

{pageNumbers.map((page, id) => (
            <span
              key={page}
              id={page}
              onClick={() => handleClick(page)}
              className={
                currentPage === id ? classes.selectedPage : classes.pageNumber
              }
            >
              {page}
            </span>
          ))
}

Then add the new class selectedPage to the css:

For example:

selectedPage: {
    cursor: "pointer",
    backgroundColor: "#000000",
    color: "#fff",
    fontSize: "24px",
    width: "20px",
    textAlign: "center"
  }