Bootstrap navbar drop down login in the React way - css

Question

I am building a login feature into a bootstrap navbar, and using the boostrap dropdown component. By default, this component closes on a click. To handle login errors, however, the component needs to stay open to display an error message. Through JQuery, it's possible to either prevent the close and then show the desired error message. But this doesn't feel right in React.
But what is the right way to do this in React? It seems that, if there's a login error, I want to
1) Set a set a state variable with the correct error message
2) Call setState to force a re-render
3) On re-render, show the drop-down as open and with the error message
But how can I show the drop-down as open on the re-render? Is there a property that will force it to start opened? Below is the HTML
<li>
<a id="nav-login" className="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Login</a>
<div className="useraccount-dropdown-menu dropdown-menu" onClick={this.preventClose} >
<p className="title">LOG IN</p>
<form action="#" onSubmit={this.login} method="post" acceptCharset="UTF-8">
<label>USER NAME</label>
<input className="textfield" ref="username" placeholder="userone#email.com" type="text"/>
<label>PASSWORD</label>
<input className="textfield" ref="password" placeholder="**********" type="password"/>
<button className="btn btn-primary btn-nativelogin" type="submit">Sign in</button>
</form>
</div>
</li>
Right now, onSubmit, the following function gets sets the error message - and calls setState. This is changing the state variable, but bootstrap closes the component so the re-render never happens.
login : function(e){
e.preventDefault();
Meteor.loginWithPassword(this.refs.username.value, this.refs.password.value, (error) => {
if(error){
this.setState({errorMsg: error.reason});
}else{
this.setState({isLoggedIn: true});
}
});
},
How can I prevent the component from closing? I tried adding an onClick event listener to the overall drop-down component and that calls stopPropagation.
preventClose: function(e){
e.preventDefault();
e.stopPropagation();
},
But this is not preventing the close.

Answer 1

You can handle the click event. Check out this demo
$('#myDropdown .dropdown-menu').on({
"click":function(e){
e.stopPropagation();
}
});
I hope this helps.