CODEWITHSUNDEEP
javascriptreactjs
Deano
Deano

Reputation: 12190

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.

Upvotes: 0

Views: 105

Answers (2)

finalfreq
finalfreq

Reputation: 6980

If you are wanting to use 1 then you would just need to establish a this.props.enabled === 1 variable somewehre to hold the true and false value.

Personally I would have enabled be a boolean value of true or false as it adds unnecessary complexity to make it a number. 

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

Upvotes: 1

Pineda
Pineda

Reputation: 7593

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>

Upvotes: 2

Related Questions