Untitled

import React,{useState} from 'react'
import { useHistory } from "react-router-dom"
// import { NavLink } from "react-router-dom"
import PropTypes from 'prop-types'
import HeaderCarousel from './HeaderCarousel'

const Header = ({ links }) => {
    let history = useHistory();
    console.log(window.location.pathname);
    const [isActive, setActive] = useState(false)
    const handleCLick = (path) => {
        setActive(!isActive)
        history.push(path)
    }
    // className = {`fr-tabs__tab $[isActive ? 'active': null]`}
  return (
      <HeaderCarousel>
          {links.map(item => {
              return (
                  <li role={`presentation`} key={ item.url }>
                      <button className={`fr-tabs__tab ${isActive ? 'active': null}`} role={`tab`} onClick={() => handleCLick(item.url)}>{ item.name }</button>
                  </li>
              )
          })}
      </HeaderCarousel>
  )
}

export default Header

Header.propTypes = {
  links: PropTypes.array.isRequired
}