[FIXED] How to make vertical tabs with React

Issue

Can someone provide me with a way to create vertical tabs using React?

I experimented with various npm packages like react-web-tabs,reactstrap and react-bootstrap.The last two only had examples for horizontal tabs.React-web-tabs has a vertical tab example in their docs but it doesn't work.

import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';

class NewNavigation extends React.Component{
render(){
return(
    <Tabs defaultTab="vertical-tab-one" vertical>
        <TabList>
            <Tab tabFor="vertical-tab-one">Tab 1</Tab>
            <Tab tabFor="vertical-tab-two">Tab 2</Tab>
            <Tab tabFor="vertical-tab-three">Tab 3</Tab>
        </TabList>

        <TabPanel tabId="vertical-tab-one">
            <p>Tab 1 content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-two">
            <p>Tab content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-three">
            <p>Tab 3 content</p>
        </TabPanel>
    </Tabs>
    );
}
}

By now, it displays basic horizontal tabs and I want to fix this code as it displays vertical tabs.It is also highly appreciated if you recommend any other way.

Solution

By adding following CSS will do the trick for you:

.rwt__tab  {
  width: 100%
}

Another way is to import the CSS file in your component by adding the following line:

import 'react-web-tabs/dist/react-web-tabs.css';

Here is the example if for your reference.

Answered By - Piyush Zalani

Answer Checked By - Mildred Charles (PHPFixing Admin)