0

There are two tabs in my code and on click of the second tab I need to show one message but I'm not knowing how to know when the second tab is selected.

The problem is the selectedIndex is not getting changed at all and the message which I wanted to show is not coming up.

const [selectedIndex, setSelectedIndex] = useState(1);

<Tabs selectedIndex={selectedIndex} onSelect={(index) => setSelectedIndex(index)} />
<TabList>
<Tab>One</Tab>
<Tab>Second</Tab>
</TabList>
<TabsPanel>content</TabsPanel>
<TabsPanel>content</TabsPanel>
</Tabs>

if (selectedIndex == 2) {
   //Show something
   //Need this msg outside the tabs
}

I have tried this and as per the react-tabs documentation this should work but it is actually not working in my case. Please suggest any alternative for onSelect or atleast show how to change the selectedIndex while in the second tab.

Naidu
  • 1
  • 1
  • 6
    tab index will start from `0` so your initial state should be `0` and for condition `selectedIndex===1` – Ronak Apr 14 '23 at 12:28

1 Answers1

1

Seems like you're trying to use Controlled mode, which is activated by passing the selectedIndex prop.

Your issue is caused by setting the default state to 1 where as the first tab has index 0. So change the useState to:

const [selectedIndex, setSelectedIndex] = useState(0);

Then you can show the current tab as:

{'Current tab index: ' + (selectedIndex + 1)}

When using Uncontrolled mode, you don't need an onSelect.

The Library will render the needed tab when using the following structure:

const Component = (
    <Tabs>
        <TabList>
            <Tab>One</Tab>
            <Tab>Second</Tab>
        </TabList>

        <TabPanel>
            <p>
                CONTENT - TAB - ONE
            </p>
        </TabPanel>
        <TabPanel>
            <p>
                CONTENT - TAB - SECOND
            </p>
        </TabPanel>
    </Tabs>
);
0stone0
  • 34,288
  • 4
  • 39
  • 64
  • Hi using TabsPanel it will render the required thing but here I need to show that msg outside the tabs. That's the reason why I'm trying onSelect etc – Naidu Apr 14 '23 at 13:26
  • I;ve improved my answer @Naidu. – 0stone0 Apr 14 '23 at 13:34
  • Hi thanks for your answer. But I didn't get where to change the selectedIndex on selecting the second tab. I tried it in onSelect but it doesn't work. Basically I need to set the state of selectedIndex on selecting the second tab but where will I do that if no need to use on Select – Naidu Apr 15 '23 at 11:17
  • Im not sure what your asking. Maybe add your new code to your question to show what's not working? – 0stone0 Apr 15 '23 at 12:45
  • const [selectedIndex, setSelectedIndex] = useState(0); setSelectedIndex(index)} /> One Second content content if (selectedIndex == 1) { //Show something //Need this msg outside the tabs } – Naidu Apr 15 '23 at 15:24
  • As you suggested I have used set selectedIndex to 0 instead of 1 initially. But that doesn't make any difference. Here my doubt is I need to somehow set the selectedIndex to 1 so that the below thing be shown when second tab is selcted. I didnt get where to write this {'Current tab index: ' + (selectedIndex + 1)}. here I need to set the selectedIndex to 1 when I click on second tab. onClick, onSelect nothing worked. Could you suggest how can I set it to 1 and show the required thing on selecting the second tab. – Naidu Apr 15 '23 at 15:27
  • I have added my latest code and my doubt as well. Could you please have a look – Naidu Apr 16 '23 at 13:33