how to hide bulma dropdown in react

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">
                        <a href="#" className="dropdown-item">Dropdown item</a>
                    </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>