I want to simply highlight the tab selected from the NavBar
. I had used the Navbar Component of React-bootstrap
and used the state to change the bgColor
and textColor
of the selected tab. But it is still NOT working? Any corrections?
import React,{useState} from 'react';
import { Navbar,Container, Nav } from "react-bootstrap"
import { LogOut } from "./LogOut"
const NavbarComponent = () => {
const [bgcolor, setBgcolor] = useState('black');
const [textcolor, setTextcolor] = useState('white');
function handleHighlightTab() {
setBgcolor('white');
setTextcolor('black');
}
return (
<>
<Navbar bg="dark" variant="dark" fixed='top' className='nav-pills'>
<Container>
<Navbar.Brand href="/">Verticals</Navbar.Brand>
<Nav className="me-auto">
<Nav.Link href="/grocery" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }} >Grocery</Nav.Link>
<Nav.Link href="/fashion" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }} >Fashion</Nav.Link>
<Nav.Link href="/footwear" onSelect={handleHighlightTab} style={{backgroundColor:{bgcolor},color:{textcolor} }}>Footwear</Nav.Link>
</Nav>
<LogOut />
</Container>
</Navbar>
</>
)
}
export default NavbarComponent;
What I want is to highlight the clicked tab only? It should remain highlighted all the time when we are on that page (like tab component or nav-pills)