How To Avoid A JQuery Call In ReactJS

I know JQuery is a code smell in ReactJS because it traverses the entire DOM to do it's work. But, I've found some places where it's hard NOT to use it. This is one instance wher

Solution 1:

I recommend you to take a look at classnames library.

Basically what it does, adds or removes classnames you like, if you have classnames that has no condition just pass true. See the following snippet.

import classNames  from 'classnames'

<div 
  id="errorMessageDiv"
  className={ classNames({
    'visible' : this.props.loginInfo.userId === '',
    'invisible' : this.props.loginInfo.userId !== '',
    'some-other-class-name' : your_condition,
    'will-be-available-definetely' : true
  }) }
>
     <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1>
</div>

If you have only one condition, you can do the following :

import classNames  from 'classnames'

<div 
  id="errorMessageDiv" 
  className={ this.props.loginInfo.userId === '' ? 'visible' : 'invisible' }
>
     <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1>
</div>

Solution 2:

You have to define how the current state renders into view, so you have to bind the condition into the rendering of the error message.

var visibleClass = this.props.loginInfo.userId === '' ? 'visible' : 'invisible';
return <div id="errorMessageDiv" className={visibleClass}>
     <h1 id="credentials" className="login-error-message">&nbsp;Please Enter Proper Credentials</h1>
</div>