Tab Navigation Not Displaying! (React.JS / JS)

user_16428146 0
Viewed 29

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: what it looks like

If anyone has any information that would be helpful, that would be much appreciated! Thanks for taking the time to help me out!! : )

reactjs tabs navigation javascript
1 Answers
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

user_180780650
Related