React pagination select toggle className

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Header extends Component {
  state = {
    activeLinkName: ""
  };

  changeActiveLink = name => this.setState({ activeLinkName: name });
  render() {
    const { activeLinkName } = this.state;
    return (
      <nav className = "pagination">
        <ul className = "pagination__list">
          <li className = "pagination__item">
            <Link
              to = "/"
              className = {`pagination__link pagination__link_icon ${activeLinkName ===
                "prev" && "pagination__link_active"}`}
              title = "Prev"
              onClick = {() => this.changeActiveLink("prev")}
            >
              <svg
                width = "16px"
                height = "20px"
                className = "pagination__icon"
                xmlnsXlink = "http://www.w3.org/1999/xlink"
              >
                <use xlinkHref = "#icon-arrow-left" />
              </svg>
            </Link>
          </li>
          <li className = "pagination__item">
            <span
              className = {`pagination__link ${activeLinkName === "1" &&
                "pagination__link_active"}`}
              onClick = {() => this.changeActiveLink("1")}
            >
              1
            </span>
          </li>
          <li className = "pagination__item">
            <span
              className = {`pagination__link ${activeLinkName === "2" &&
                "pagination__link_active"}`}
              onClick = {() => this.changeActiveLink("2")}
            >
              2
            </span>
          </li>
          <li className = "pagination__item">
            <span
              className = {`pagination__link ${activeLinkName === "3" &&
                "pagination__link_active"}`}
              onClick = {() => this.changeActiveLink("3")}
            >
              3
            </span>
          </li>
          <li className = "pagination__item">
            <span
              className = {`pagination__link ${activeLinkName === "4" &&
                "pagination__link_active"}`}
              onClick = {() => this.changeActiveLink("4")}
            >
              4
            </span>
          </li>
          <li className = "pagination__item">
            <Link
              to = "/"
              className = {`pagination__link pagination__link_icon ${activeLinkName ===
                "next" && "pagination__link_active"}`}
              title = "Next"
              onClick = {() => this.changeActiveLink("next")}
            >
              <svg
                width = "16px"
                height = "20px"
                className = "pagination__icon"
                xmlnsXlink = "http://www.w3.org/1999/xlink"
              >
                <use xlinkHref = "#icon-arrow-right" />
              </svg>
            </Link>
          </li>
        </ul>
      </nav>
    );
  }
}

export default Header;