Conditional rendering style

Question

I am following a tutorial, this point didn't get explained and got me confused,

What is it to use !isOpen in style?

Does it mean that if I pass isOpen then styles.buttonPadding will work?

export default function ToggleableTimerForm({ isOpen }) {
  return (
    <View style={[styles.container, !isOpen && styles.buttonPadding]}>
      {isOpen ? <TimerForm /> : <TimerButton title="+" color="black" />}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 10,
  },
  buttonPadding: {
    paddingHorizontal: 15,
  },
});

AlainIb · Accepted Answer · 2018-09-30 16:40:01Z

4

you can use conditionnal test in render to add code and style

with your example :

<View style={[styles.container, !isOpen && styles.buttonPadding]}>
  {isOpen ? <TimerForm /> : <TimerButton title="+" color="black" />}
</View>

if isOpen is true, same as :

<View style={[styles.container, styles.buttonPadding]}>
    <TimerForm />
</View>

if isOpen is false, same as :

<View style={[styles.container]}>
    <TimerButton title="+" color="black" />
</View>

Little off topic, sometimes you can see this syntax :

    <View style={styles.container}>
        {isOpen && <TimerForm />}
    </View>

it is equal to this

    <View style={styles.container}>
        {isOpen ? <TimerForm /> : null}
    </View>

answered Sep 30, 2018 at 16:40

AlainIb

4,6157 gold badges42 silver badges67 bronze badges

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

2 Comments

CyberMew Over a year ago

Had an issue with Typescript complaining, so had to make sure not mixing up ViewStyle vs TextStyle. One question, if we do something like style={ true ? {paddingTop: '50%'} : {}}, will this impact performance with {}?

AlainIb Over a year ago

i think it's ok, it's like doing !isOpen && styles.buttonPadding

Sedat Öztürk · Accepted Answer · 2018-09-30 16:36:41Z

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation

I think this situation is named short-circuit evaluation. Right side of the && operator applies only when the left side condition is true. In this case, the style will only work when isOpen is false. (Because of !isOpen).

You can use this evaluation for null check. For example, you use users name data from props with {this.props.user.name}, if there is no user data{this.props.user} in props, your app will crash. So, you write {this.props.user && this.props.user.name} and your code will try to access users name data only if there is a user in your props. So, your app won't crash.

Collectives™ on Stack Overflow

Conditional rendering style

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related