Is there a better way to write this ternary expression in JSX?

Question

Is there a better way to write this ternary expression in this snippet of JSX?

<Form ... error={this.props.errorMessage ? true : false}>

score 9 · Accepted Answer · answered Dec 09 '17 at 23:26

9

You can shorten it slightly by:

<Form ... error={!!this.props.errorMessage}>

!! will turn a value into true or false depending on whether that value is truthy or falsy.

answered Dec 09 '17 at 23:26

Christian Santos

Thanks. I'm pretty new to JS. Can you tell me if this is widely used or is it something that would leave most people confused. – KevinS Dec 09 '17 at 23:43
1

In my experience, `!!` is usually not JS 101 and most JS devs come across it by chance, so it depends -- if you're on a team where most are seasoned JS developers, they will have seen this syntax before. If members of the team are new to JS and have experience with other programming languages (especially static ones), I would say leaving it the way you originally had it is clearer. – Christian Santos Dec 09 '17 at 23:52

score 3 · Answer 2 · answered Dec 09 '17 at 23:26

3

You can just double negate errorMessage prop:

<Form ... error={!!this.props.errorMessage}>

answered Dec 09 '17 at 23:26

Cleiton

2 Answers2