CODEWITHSUNDEEP
javascriptreactjsreact-nativeconditional-rendering
gkeenley
gkeenley

Reputation: 7418

React Native: is there any difference between implementing conditional rendering with ternary vs &&?

In my React Native app, I want to render a <View> conditional on variable var. There are two ways I've tried doing this:

1)

{var && <View/>}

{var ? <View/> : null}

Is there an advantage of one over the other?

Upvotes: 1

Views: 91

Answers (1)

MrCode
MrCode

Reputation: 64536

The difference is in method 2, the falsey expression can be rendered. Take this example, which will render <div>0</div> instead of an empty div as you might expect.

render() {
  const count = 0;
  return (
    <div>
      {count && <View />}
    </div>
  );
}

Conditional rendering docs.

Upvotes: 1

Related Questions