Tab Change Functionality of Bootstrap not working in ReactJS

Question

Layout.js file

<div class="row">
    <div class="col-12" style={{padding: 0}}>
    <div class="tabs-container-fluid">
        <MidTabs />
        <div class="tab-content">
            <Mail />
            <PromotionalActiv/>
            <Dashboard />
            <SalesOver />
            <XYZAnalysis />
        </div>
    </div>
</div>    
</div>

MidTabs.js file where hrefs are added for the different tablets.

return (
        <div>
            <ul class="nav nav-tabs" role="tablist">
                <li><a class="nav-link active" data-toggle="tab" href="#tablet-1"> <i class="fa fa-th-large"></i>Dashboard</a></li>
                <li><a class="nav-link " data-toggle="tab" href="#tablet-2" > <i class="fa fa-envelope"></i>Engage with ABC</a></li>
                <li><a class="nav-link " data-toggle="tab" href="#tablet-3"> <i class="fa fa-bar-chart-o"></i>Sales Overview</a></li>
                <li><a class="nav-link " data-toggle="tab" href="#tablet-4"> <i class="fa fa-handshake-o"></i>Promotional Activity</a></li>
                <li><a class="nav-link " data-toggle="tab" href="#tablet-5"> <i class="fa fa-user-circle"></i>XYZ Analysis</a></li>
            </ul>
        </div>
    );

Dashboard.js file

return (
        <div>
            <div role="tabpanel" id="tablet-1" class="tab-pane active">
                        <div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
                            <div class="row" style={{marginBottom :30, zoom:"75%" }}>
                                <div class="timeline col-12" style={{fontSize : 12}}
............

I have similar files for Mail.js, PromotionalActiv.js, etc. The problem is that when I click on a tab like Dashbaord/Mail, etc, I can't see the corresponding content. Instead, all the content in Dashboard, Mail, PromotionalActiv, etc are stacked one below the other. I want that content to be rendered conditionally based on whether the tab has been clicked or not.

Am I making a mistake in the way I'm arranging the components?

Answer 1

If you are trying to control with some custom css, you can do this.

---

Inside the Dashboard.js file, in the tab-pane class, put display: none;

And in the active class next to tab-pane , put display: block;

Answer 2

Ok, so the issue was that I was adding an extra div in every child component like Mail, PromotionalActive, etc due to which the CSS class was getting affected. After removing the extra div in those components, the problem got solved.

For example, the Dashboard.js file will now look like this without the extra div:

return (
        <div role="tabpanel" id="tablet-1" class="tab-pane active">
                    <div class="panel-body" style={{backgroundColor : "rgb(243,243,244)", border : "none", margin : 0}}>
                        <div class="row" style={{marginBottom :30, zoom:"75%" }}>
                            <div class="timeline col-12" style={{fontSize : 12}}

............