I am using Semantic UI React's tab component to make a page switcher (no routes). Everything was working perfectly, till last month, when I am unable to navigate to another tab in the deployed version. On localhost the code is running fine, and the tabs work perfectly. Don't know what happens when the website is deployed and running. Would love to hear any fixes/ similar experiences.
I am using Firebase to host my website. And here is the tabbedNavigation code
import { Menu, Grid } from "semantic-ui-react";
import PageA from "./PageA";
import PageB from "./PageB";
import PageC from "./PageC";
class TabbedNavigation extends Component {
state = { activeItem: "Alpha" };
handleItemClick = (e, { name }) => this.setState({ activeItem: name });
render() {
const { activeItem } = this.state;
return (
<div>
<Grid centered>
<Menu pointing secondary>
<Menu.Item
name="Alpha"
active={activeItem === "Alpha"}
onClick={this.handleItemClick}
/>
<Menu.Item
name="Beta"
active={activeItem === "Beta"}
onClick={this.handleItemClick}
/>
<Menu.Item
name="Gamma"
active={activeItem === "Gamma"}
onClick={this.handleItemClick}
/>
</Menu>
</Grid>
{/* ________________________________________________________________________________ */}
{/* Active Tabs and respective content */}
{activeItem === "Alpha" ? (
<PageA />
) : null}
{activeItem === "Beta" ? (
<PageB />
) : null}
{activeItem === "Gamma" ? (
<PageC />
) : null}
</div>
);
}
}
export default TabbedNavigation;
Also spotted this warning in the console
Warning: ReactDOM.render is no longer supported in React 18.
Use createRoot instead. Until you switch to the new API, your
app will behave as if it's running React 17. Learn more:
https://reactjs.org/link/switch-to-createroot