React.js validate props input

Question

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.

why don't you pass a boolean value ´enabled={true}´ or change the condition to ´this.props.enabled==1´ — diedu
– diedu, Commented Dec 1, 2016 at 23:51

Pineda · Accepted Answer · 2016-12-02 00:21:10Z

2

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>

answered Dec 2, 2016 at 0:21

Pineda

7,5933 gold badges34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

finalfreq · Accepted Answer · 2016-12-02 01:24:04Z

1

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>

answered Dec 1, 2016 at 23:52

finalfreq

7,0202 gold badges29 silver badges28 bronze badges