Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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!! : )

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!