Pills in bootstrap is not working in react project - reactjs

Question

I am trying to create a pills nav-bar in my react project and my links are not working although it shows the id is being passed through. Can anyone show me where my mistake is, or why it isn't working?
Here is my code:
render(){
return(
<div className="searchContainer" dir="rtl">
<ul className="nav nav-pills">
<li className="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div className="tab-content">
<div id="home" className="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" className="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" className="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
);
}
}
I have included these scripts in app.jsx:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Answer 1

I have created a functional component in react, Which just contains the markup you have provided and some libraries
React
react-dom
bootstrap css
bootstrap js
jquery
Make sure that you are using all these js libraries and also script ordering is important. Check in code snippet. You can see the running code as well.
const Comp = () => (
<div>
<h3> Test 1 </h3>
<hr/>
<ul className="nav nav-pills">
<li className="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>
<div className="tab-content">
<div id="home" className="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" className="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" className="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
);
ReactDOM.render( <Comp /> ,
document.getElementById('root')
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="root"></div>