I am currently working with ReactJS in conjunction with a Bootstrap Nav Bar. Bootstrap utilizes an <a> tag for the navigation buttons. I am aiming to have the buttons scroll down to a different component on the page without resorting to using an href attribute. I already have a scrollFunction set up to facilitate scrolling to a specific section based on the button pressed. However, if I switch the <a> tag to a button type, it alters the formatting drastically and causes me to lose the "active" page style as well as the pointer effect when hovering over the button.
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Education <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
https://i.sstatic.net/MmhYc.png
Should I modify the Education <a> tag like this:
<button class="nav-link" type="button" onClick={()=>scrollFunc("education")} style={{background:"transparent", border:"none"}}>Education</button>
The resulting output will resemble this.
https://i.sstatic.net/2vOIM.png
Alternatively, if I adjust the Education to:
<a class="nav-link" type="button" onClick={()=>scrollFunc("education")} style={{background:"transparent", border:"none"}}>Education <span class="sr-only">(current)</span></a>
You can expect the output to look similar to this:
https://i.sstatic.net/BSVzq.png
My goal is to achieve the appearance of the first image without utilizing an href. Additionally, I wish for the mouse icon to display as a pointer upon hover, as illustrated here:
https://i.sstatic.net/bGBOi.png
If you could provide guidance on how to accomplish this, I would greatly appreciate it. Web Development is still a new field for me.