I am currently working on a webpage that features two interactive tabs. The goal is to have one tab highlighted as "active" while the other remains inactive when clicked, and then switch roles when the other tab is selected.
Below is the code snippet I have implemented:
import react from 'react'
const account = () => {
const [activeTab, tabActive] = react.useState("true")
return (
<>
<div className='container my-5'>
<ul className="nav nav-tabs">
<li className="nav-item">
<button type="button" className={"nav-link " + (activeTab?'active':'')} onClick={() => tabActive("true")}>Profile details</button>
</li>
<li className="nav-item">
<button type="button" className={"nav-link " + (activeTab?'':'active')} onClick={() => tabActive("false")}>Select Colleges</button>
</li>
</ul>
</div>
<div className='container my-5'>
{
activeTab === "true" && <p>Value is true</p>
}
{
activeTab === "false" && <p>Value is false</p>
}
</div>
</>
)
}
export default account
Although the provided code seemingly fulfills the intended functionality, there seems to be an issue with toggling the active class between the two buttons effectively. Currently, both buttons have the class applied simultaneously or neither at all, rather than switching between them as expected.