1

I've seen this question asked before but have not seen an answer. I have two tabs for now but neither tab shows any content. I've pared it all back to its most basic functioning. I'm not trying to display a component in the tab; just an h1 for now. Based on a comment from here I added a link to the header of my index.html and it is still a stubborn no-show. Here's what I'm working with:

import React, { Component, useState } from 'react';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';

export class GameHome extends Component {
    static displayName = GameHome.name;

    constructor(props) {
        super(props);
        this.state = {

        };
        this.componentDidMount = this.componentDidMount.bind(this);
    }

    componentDidMount() {
    }
 
    render = () => {

        return (
            <Tabs defaultActiveKey="tab1" id="uncontrolledTabs">
                <Tab eventKey="tab1" title="Tab 1">
                    <h1>Tab 1</h1>
                </Tab>
                <Tab eventKey="tab2" title="Tab 2">
                    <h1>Tab 2</h1>
                </Tab>
            </Tabs>
        );
    }
}
1
  • can you add a sandbox reproducing your issue? the code looks ok, except you don't need to bind componentDidMount
    – buzatto
    Mar 15, 2021 at 0:38

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.