Deano Deano - 6 days ago 9
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

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>