how to hide bulma dropdown in react - reactjs

Question

How can I use a trigger event to a menu item in Bulma dropdown in react?
I don't know how to hide the menu since the button is not the parent of the menu.
<div className="dropdown is-active">
<div className="dropdown-trigger">
<button className="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span className="icon is-small">
<i className="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div className="dropdown-menu" id="dropdown-menu" role="menu">
<div className="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
</div>
</div>
</div>

Answer 1

This can be done by toggling class name based on a condition. Here is an example based on your code:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { collapsed: true };
}
handleToggle() {
this.setState({ collapsed: !this.state.collapsed });
}
render() {
return(
<div className={"dropdown" + (this.state.collapsed ? "" : " is-active")} tabIndex="0" onBlur={() => this.handleToggle()}>
<div className="dropdown-trigger">
<button className="button" aria-haspopup="true" aria-controls="dropdown-menu" onClick={() => this.handleToggle()}>
<span>Dropdown button</span>
<span className="icon is-small">
<i className="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div className="dropdown-menu" id="dropdown-menu" role="menu">
<div className="dropdown-content">
Dropdown item
</div>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.8.0/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<div id="root"></div>

Answer 2

This is my answer.
is-hidden is bulma's function
state = {
isHide: "is-hidden"
}
handleToggle = () => {
if(this.state.isHide == "is-hidden") {
this.setState(state => ({
isHide: ""
}));
}
else {
this.setState(state => ({
isHide: "is-hidden"
}));
}
}
<div className="dropdown is-active">
<div className="dropdown-trigger">
<button className="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span className="icon is-small">
<i className="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div className={menuHidden} id="dropdown-menu" role="menu">
<div className="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
</div>
</div>
</div>