I am trying to make tab navigation for a section on an app that I'm working on, though I am having some trouble. It was working a while ago but for some reason, it's not displaying the different tabs to click on.
I am still fairly new to React and JS so I'm having a hard time following the code that I wrote before. (also, I'm not sure why I am not using the HandleChange but I remember that I need it)
Here is my code:
import React from "react";
import InfoText from "./InfoComponent";
import TransportationText from "./TransportationComponent";
import Hotels from "./HotelsComponent";
import FAQ from "./FAQComponent";
import Covid from "./CovidComponent";
const TravelersTab = () => {
const [selectedTab, setSelectedTab] = React.useState(0);
const handleChange = (event, newValue) => {
setSelectedTab(newValue);
};
return (
<div
position="static"
>
<h1 style={{
textAlign: "center"
}}>Travelers</h1>
{selectedTab === 0 && <InfoText />}
{selectedTab === 1 && <Hotels />}
{selectedTab === 2 && <TransportationText />}
{selectedTab === 3 && <Covid />}
{selectedTab === 4 && <FAQ />}
</div>
);
};
export default TravelersTab;
Here is a picture of what I am seeing:
If anyone has any information that would be helpful, that would be much appreciated: Thanks for taking the time to help me out!! : )
const TravelersTab = () => {
const [selectedTab, setSelectedTab] = React.useState(0);
const handleChange = (newValue) => {
setSelectedTab(newValue);
};
return (
<div
position="static"
>
<h1 style={{
textAlign: "center"
}}>Travelers</h1>
{selectedTab === 0 && <InfoText onClick={handleChange(0)}/>}
{selectedTab === 1 && <Hotels onClick={handleChange(1)}/>}
{selectedTab === 2 && <TransportationText onClick={handleChange(2)}/>}
{selectedTab === 3 && <Covid onClick={handleChange(3)}/>}
{selectedTab === 4 && <FAQ onClick={handleChange(4)}/>}
</div>
);
};
And set onClick event on tabItem in each Tab component such as "InfoText, Hotels, TransportationText...." Of course this is not best practice, but it would be help.
I can deliver some wonderful code snippet for this.
Please send me DM if you want it.
~ Storm In Talent
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.