CODEWITHSUNDEEP
javascriptreactjscreate-react-appreact-bootstrap
Blaise Iradukunda
Blaise Iradukunda

Reputation: 51

react-bootstrap tabs - content is not showing

tabs not showing content and there is no style on tabs

the tabs are not showing content, here is the code. how can i solve this?

what am i doing wrong?

this code is almost similar to the one on react-bootstrap page

//simple tabs.js

import React, {Component} from 'react';
import {Tabs, Tab} from 'react-bootstrap';
import TabItem from './TabItem';
import data from './data'

class SimpleTabs extends Component{

    constructor(props){
        super(props);
        this.state = {
            key: 1 | props.activeKey
        }
        this.handleSelect = this.handleSelect.bind(this);
    }

    handleSelect (key) {
        console.log("selected " + key);
        this.setState({key})
    }
    render(){
        return (
             <Tabs
            activeKey={this.state.key}
            onSelect={this.handleSelect}
            id="controlled-tab-example"
            >
                <Tab eventKey={1} title="Tab 1">
                Tab 1 content
                </Tab>
                <Tab eventKey={2} title="Tab 2">
                Tab 2 content
                </Tab>
                <Tab eventKey={3} title="Tab 3">
                Tab 3 content
                </Tab>
            </Tabs>
        );
    }
}

export default SimpleTabs;

// App.js
import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import SimpleTabs from './components/SimpleTabs';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import 'bootstrap/dist/css/bootstrap.css'

class App extends Component {
  render() {
    return (
      <SimpleTabs />
    );
  }
}

export default App;

page on web

I do need help to keep moving forward

Upvotes: 5

Views: 5227

Answers (2)

Tushar Nitave
Tushar Nitave

Reputation: 577

Instead of importing react-bootstrap try importing react-tabs and react-tabs.css. Following this link solved my issue.

Upvotes: 1

Bradey Whitlock
Bradey Whitlock

Reputation: 201

The problem is your css isn't loading for the bootstrap components. If you add this in the header of your index.html where your serving your React app it should look correct. I see that you are trying to add the min.css to the App. Not sure why that isn't working, but this will work.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Upvotes: 1

Related Questions