2

My understanding was that && is an "and" operator. How can what follows && in the code block return a boolean?

{accounts.length > 0 && (
        <View>
          {accounts.map((account) => (
            <AccountListItem
              key={account.mask}
              account={account}
              selectedAccount={selectedAccount}
              setSelectedAccount={setSelectedAccount}
            />
          ))}
        </View>
  )}
lifelonglearner
  • 196
  • 15
  • It doesn't return a boolean, it returns an element. – jonrsharpe Aug 14 '20 at 21:10
  • 2
    That's saying if the accounts.length > 0 then execute the following code, it's like a shorthand if statement – Saadi Toumi Fouad Aug 14 '20 at 21:10
  • It returns an element and if the element exist it is truthy – Carlos1232 Aug 14 '20 at 21:11
  • FYI: although using `&&` works, it's often recommended to use a ternary that explicitly returns `null` if the condition is `false` instead. I can't recall the reasoning though... – Slbox Aug 14 '20 at 21:15
  • 1
    @Slbox You can't use `accounts.length && `, because even though `0` is falsy, it will render as "0" (numbers are converted to strings; `<>before{0}after>` renders "before0after"). There's no particular reason not to use `accounts.length > 0 && `, though, other than style preferences. – Lionel Rowe Aug 15 '20 at 11:02
  • @LionelRowe ah yes, thank you! That's what I was thinking of. – Slbox Aug 15 '20 at 18:58

5 Answers5

4

(if this part is true) && (this part will execute)

Conditional Rendering

Orhan Cinar
  • 8,403
  • 2
  • 34
  • 48
2

expr1 && expr2 works like this:

If expr1 can be converted to true, returns expr2; else, returns expr1.

expr1 is accounts.length > 0.

  • If this is false, then it cannot be converted to true, so the whole expression evaluates to false.
  • Otherwise, it is true, so the whole expression evaluates to expr2, which in our case is a View component.

In React, false renders nothing. You can verify this with the following minimal example:

const Test = () => <>before{false}after</>

ReactDOM.render(<Test />) // renders as "beforeafter"

In other words, in our example, if accounts.length is 0 then false is returned, rendering nothing; else, a View is returned, which is rendered.

Lionel Rowe
  • 5,164
  • 1
  • 14
  • 27
  • Interesting. Why wouldn't I just use regular control flow? – lifelonglearner Aug 15 '20 at 03:40
  • Could you explain what you mean by "regular control flow"? If you mean an if statement, you can't use them inside react component rendering logic. If you mean a ternary operator, sure, you could use that, but this way is slightly more concise. – Lionel Rowe Aug 15 '20 at 11:00
1

For && expression will not evaluate right side if left returns false so it's a short cut to doing following:

{accounts.length > 0 ? (
    <View>
      {accounts.map((account) => (
        <AccountListItem
          key={account.mask}
          account={account}
          selectedAccount={selectedAccount}
          setSelectedAccount={setSelectedAccount}
        />
      ))}
    </View>
):""}
Maxqueue
  • 2,194
  • 2
  • 23
  • 55
1

The logic operators are short circuit so if the left hand side of the expression of an and statement is false then the right hand side is not evaluated. It is a way of doing an if.

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
0

Everything in JavaScript is coercible to boolean.

However, that doesn't really matter here. The result of the expression is inside of the () has no bearing on the action being taken.

accounts.length > 0 && is a short circuit approach to make sure that the following action is taken only when accounts exist, presumably because map is used.

Evaluating the expression inside of () results in the <View> being rendered, and the return from evaluating that expression is never actually used, so regardless of what it is coerced into, it doesn't effect anything.

Travis J
  • 81,153
  • 41
  • 202
  • 273
  • Everything in JavaScript can be considered truthy or falsey but that doesn't mean coercible to boolean. – Adrian Brand Aug 15 '20 at 00:52
  • @AdrianBrand - Yes, that is literally what that means. Please see [MDN's definition of truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy#:~:text=In%20JavaScript%2C%20a%20truthy%20value,%2C%20undefined%20%2C%20and%20NaN%20). – Travis J Aug 15 '20 at 01:18