javascriptreactjsreact-nativeconditional-rendering

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?

Solution

  • 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.