I don't understand && in this JavaScript (JSX) Syntax [duplicate]

Question

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>
  )}

Answer 1

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

Conditional Rendering

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