Hey I'm just starting to learn React and have a good knowledge of HTML, CSS, and JavaScript. I can't get this NavBar to change color if it is the active Link I have tried using several different ways but nothing is working for me. I have the layout how I want it I just don't know if I am writing the JSX code wrong but any help or tips would be amazing thanks.
React JSX code for NavBar
import React from "react";
import { Link } from "react-router-dom";
import "./NavBar.scss";
const NavBar = () => {
return (
<ul class="tab-bar">
<Link to="/" className="tab">
<li>Flash Cards</li>
</Link>
<Link to="/sets" className="tab">
<li>Sets</li>
</Link>
<Link to="/new" className="tab">
<li>New</li>
</Link>
<Link to="/about" className="tab">
<li>About</li>
</Link>
<Link to="/login" className="tab">
<li>Login</li>
</Link>
</ul>
);
};
export default NavBar;
SCSS for the NavBar
$primary-color: #0f9b8e;
$secondary-color: #343837;
$tertiary-color: #03719c;
body {
background: $secondary-color;
}
.tab-bar {
margin: 0px;
padding: 0px;
display: flex;
list-style-type: none;
}
.tab {
width: 100%;
padding: 20px 0;
background: $primary-color;
color: white;
overflow: hidden;
text-align: center;
flex-grow: 1;
cursor: pointer;
position: relative;
text-decoration: none;
}
.tab:hover,
.tab:active {
background: $tertiary-color;
}