How can I save current active tabs when page reloading?
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3">
<Tab eventKey="home" title="Home">
<Sonnet />
</Tab>
<Tab eventKey="profile" title="Profile">
<Sonnet />
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
<Sonnet />
</Tab>
</Tabs>
Here I got the solution for tab activate even after reloading the page
const [key, setKey] = useState("Home");
useEffect(() => {
const getActiveTab = JSON.parse(localStorage.getItem("activeTab"));
if (getActiveTab) {
setKey(getActiveTab);
}
}, []);
useEffect(() => {
localStorage.setItem("activeTab", JSON.stringify(key));
}, [key]);
<Tabs
id="controlled-tab-example"
activeKey={key}
onSelect={(k) => setKey(k)}
className="mb-3"
>
<Tab eventKey="home" title="Home">
<h3>Home</h3>
</Tab>
<Tab eventKey="profile" title="Profile">
<h3>Profile</h3>
</Tab>
<Tab eventKey="contact" title="Contact">
<h3>Contact</h3>
</Tab>
</Tabs>