CODEWITHSUNDEEP
androidreact-nativeconditional-rendering
Aleksandar Zoric
Aleksandar Zoric

Reputation: 1483

Conditional rendering with OR operator

I have the following code;

       {
          this.state.isWPAEnterpriseInstalled && !this.state.passpoint && !this.state.expanded || this.state.isWPAEnterpriseInstalled && !this.state.expanded && this.state.isEnterprise && <TouchableOpacity style={!this.state.expanded ? [styles.button, { backgroundColor: this.state.primary_color }] : [styles.expandedButton, { backgroundColor: this.state.primary_color }]}
            activeOpacity={0} onPress={this.removeConfigEnterprise}>
            <Text allowFontScaling={false} style={styles.button_text}>Remove WPA </Text>
          </TouchableOpacity>
        }

The problem I am having is with the condition render line;

this.state.isWPAEnterpriseInstalled && !this.state.passpoint && !this.state.expanded || this.state.isWPAEnterpriseInstalled && !this.state.expanded && this.state.isEnterprise &&

It's like it only recognises one of these condition between the OR operator i.e. whichever is placed first. Is it possible that the OR (||) operator is not available in React with conditional rendering?

If so, how can I achieve the below? e.g. render based on 2 OR condition.

IF ABC AND GH AND ER OR DEF AND FGH AND TYU then display button

EDIT

Resolved. Above code worked but had a mismatch in one of states set where I expected a different value.

Upvotes: 0

Views: 585

Answers (2)

nipuna-g
nipuna-g

Reputation: 6652

Is it possible that the OR (||) operator is not available in React with conditional rendering?

No, JSX should accept any JavaScript expression.

If so, how can I achieve the below? e.g. render based on 2 OR condition.

IF ABC AND GH AND ER OR DEF AND FGH AND TYU then display button

The way && shorthand works for conditional rendering is explained here: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

It works because true && VALUE always returns VALUE which in this case is the element to be rendered.

But when we add an OR operator in between, it returns the boolean value instead of the element.

To fix this, you will need to wrap the entire statement in parenthesis.

And you may want to consider using inline if-else statement instead since when using this technique with non boolean values(ex - strings) react-native can crash due to text being rendered outside of Text elements.

Upvotes: 1

Gheeks
Gheeks

Reputation: 41

I'm not sure I understood your question properly so tell me if I'm wrong, but I think you're missing parenthesis there. I think you're trying to render this.state.isWPAEnterpriseInstalled

Maybe you meant to write the following :

(this.state.isWPAEnterpriseInstalled && !this.state.passpoint && !this.state.expanded) || (this.state.isWPAEnterpriseInstalled && !this.state.expanded && this.state.isEnterprise) && <TouchableOpacity>...

I hope I could help.

Upvotes: 1

Related Questions