Deano Deano - 1 year ago 126
Javascript Question

React.js validate props input

I'm trying to pass values to my component 'Form' as props

<Form firstName={'John'} lastName={'Doe'} enabled={1} />

I would like to know how to validate boolean value, when enabled with value 1 assign CSS class Active otherwise add CSS class disabled.

This is what I have tried within my react component and it hasn't worked.

<span className="Disabled">{this.props.enabled ? "Active" : 'Disabled'}</span>

Your help is highly appreciated.

Answer Source

If you want the class to change on the <span> you'll need to set the condition on the property className rather than the content of the element:

<span className={(this.props.enabled === 1)? "Active" : 'Disabled'}></span>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download