Bootstrap 4 dropdown in react - toggle and close on click outside component - reactjs

Question

I do want to use Bootstrap 4 in react natively (without 3rd party libs). The dropdown toggle (especially closing the dropdown-menu) must be controlled by a dedicated function. The reason is that the dropdown-menu must be able to receive multiple click events. The normal behavior by BS is that it's closing after the first click.
Bootstrap Documentation suggests to use $('.dropdown-toggle').dropdown() when using JavaScript but I'd prefer not to use jQuery and refs in react.
The following code is working but I doubt it is good practice. What's the best practice solution here?
toggleDropdown = () => {
document.getElementById("dropdownMenu").style.display = document.getElementById("dropdownMenu").style.display === "" ? "block" : "";
};
render() {
<div className="dropdown">
<button
onClick={this.toggleDropdown}
className="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton">
Dropdown button
</button>
<div id="dropdownMenu" className="dropdown-menu p-4 text-muted" style={{maxWidth: "200px"}}>
<p>Some example text that's free-flowing within the dropdown menu.</p>
</div>
</div>
}

Answer 1

First thought: ToggleDropdown can be written like this(more dynamic).
toggleDropdown = (e) => {
var elem = e.target.nextElementSibling.classList;
elem.contains('show') ? elem.remove('show') : elem.add('show');
};

Answer 2

This involves the basic usage of state in React.
class App extends React.Component {
state = {
show: false,
};
render() {
return (
<div className="dropdown">
<button
onClick={() => this.setState((prevState) => ({ show: !prevState.show }))}
className="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
>
Dropdown button
</button>
{this.state.show && (
<div
id="dropdownMenu"
className="dropdown-menu p-4 text-muted"
style={{ maxWidth: '200px' }}
>
<p>Some example text that's free-flowing within the dropdown menu.</p>
</div>
)}
</div>
);
}
}