Using Or In Ternary Operator

I have a simple ternary operator, where I want to return null with two different strings. this.props.sportType === 'tennis' || 'soccer' ? null :

Solution 1:

Repeat the comparison with the second value

this.props.sportType === 'tennis' || this.props.sportType === 'soccer'
    ? ...

Solution 2:

Use an array and see whether sportType is included in it:

['tennis', 'soccer'].includes(this.props.sportType)
? null
: <lionClick={this.props.onClick}className={styles.menuItem}>Sport</li>

(also, preferably indent longer expressions)

Solution 3:

As in a IF statement, you need to compare the "soccer" string to

this.props.sportType === 'tennis' || this.props.sportType === 'soccer' ? null : <lionClick={this.props.onClick}className={styles.menuItem}>N/A</li>

Solution 4:

You can use Regex

/^tennis|soccer$/.test(this.props.sportType) ? null : <lionClick={this.props.onClick}className={styles.menuItem}>N/A</li>

Share