Dropdown values not showing when I click dropdown button - Reactjs - reactjs

Question

Dropdown values not showing in Address section. I used bootstrap 4 code.
I am not getting any error, when I am clicking dropdown it's not showing dropdown values.
I have added bootstrap 4 dropdown on this page but it's not working dropdown.
Please help with this.
Here is the code for review and I am a beginner at the react js. Please help
import React from 'react'
const ProfileInfo = () => {
return (
<div className="container-fluid">
<div className="row clearfix">
<div className="col-md-6 col-sm-12"> </div>
<div className="col-md-6 col-sm-12"> </div>
</div>
<div className="row clearfix">
<div className="col-md-6 col-sm-12">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<h5 className="card-title" style={{ color: '#009540' }}><strong>Profile: </strong> </h5>
<p className="card-text"><strong>Navn: </strong> Bengt Nilsfors</p>
<p className="card-text"><strong>Kontaktinformasjon: </strong> 95833897, nilsfors#gmail.com</p>
<div className="dropdown">
<button className="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Address
</button>
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a className="dropdown-item" href="#">Address1</a>
<a className="dropdown-item" href="#">Address2</a>
</div>
</div><br/>
<p className="card-text"><strong>Adresse: </strong> Nøkken 7 H0101, 9016 Tromsø</p>
<p className="card-text"><strong>Passord: </strong> ***********</p>
<button className="btn btn-success">Rediger</button>
</div>
</div>
<div className="col-md-6 col-sm-12">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<h5 className="card-title" style={{ color: '#009540' }} ><strong>Nettverksanalyse</strong></h5>
<img className="card-img" variant="top" src="../images/testimg.png" style={{ width: '152px' }} />
<div style= {{ position: 'absolute', top: '66px', right: '108px' }}>17:58:55: Henter nettverskinfo...<br/>
18:00:31: Nettverkstatus ok. Ingen feil funnet.</div>
<button className="btn btn-warning mt-2 text-center">See details</button>
</div>
</div>
</div>
<div className="row">
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded" >
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Abonnement</h5>
<p className="card-text"><strong>Internett</strong></p>
<p className="card-text">Giga (1000/1000) Kr 699,- per mnd.</p>
Oppgrader
</div>
</div>
</div>
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded">
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Faktura</h5>
<ul className="list-group" style= {{ float: 'left' }}>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Mars 2021</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Desember 2020</a></li>
<li><a className="card-link"href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Februar 2021</a></li>
</ul><ul className="list-group" style={{ float: 'right' }}>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Desember 2020</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}> November 2020</a></li>
<li><a className="card-link" href="https://www.homenet.no/" target="_blank" style={{ color: '#009540' }}>Oktober 2020</a></li>
</ul>
<div style={{ marginTop: '76px' }}> Se alle</div>
</div>
</div>
</div>
<div className="col-md-4 mt-5 text-center">
<div className="card mb-3 shadow-sm p-3 bg-white rounded">
<div className="card-body">
<h5 className="card-title" style={{ color: '#009540' }}>Kontakt oss</h5>
<p className="card-text">Kontakt oss via chat eller telefon [phone].</p>
Chat
</div>
</div>
</div>
</div>
</div>
)
}
export default ProfileInfo

Answer 1

I think you need to use an html table. Then your code will look like this :
<button className="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Address
</button>
<ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a className="dropdown-item" href="#">Address1</a></li>
<li><a className="dropdown-item" href="#">Address2</a></li>
</ul>
</div>
But with React you have a specific bootstrap components. You should use these components : https://react-bootstrap.github.io/components/dropdowns/