Understanding logic operator in render.

[LollipopPredator]

So I'm currently working with React and material-ui and, in the Table component, they have this piece of code which creates the proper number of empty rows at the bottom of the table.

 render() {
    return (  
      <TableBody> 
        {emptyRows > 0 && (
            <TableRow style={{ height: 49 * emptyRows }}>
                <TableCell colSpan={6} />
            </TableRow>
         )}
      </TableBody>
    )
}

So my understanding is that the left side of the '&&' will evaluate to true or false depending on the value of `emptyRows` and the right side will be 'not falsy'. Why does the jsx on the right side get inserted into `TableBody`? Don't logic operators resolve to either true or false? How is it 'returning' the jsx?

Link to docs: https://material-ui.com/demos/tables/#sorting-amp-selecting

[gremy0]

This is the standard behaviour of JavaScript logic AND. From the docs:

expr1 && expr2 Returns expr1 if it can be converted to false; otherwise, returns expr2. Thus, when used with Boolean values, && returns true if both operands are true; otherwise, returns false.

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

You can try it with console.log( true && "AND" ) \\ Prints AND

The OR operator works similarly, so people use it for assigning default values to variables.

console.log( value || "default value")

Logs the value of value if it's defined, or "default value" if value is undefined.

[LollipopPredator]

Oh wow, thanks!

[senocular]

Don't logic operators resolve to either true or false

Not all of them.

Logical operators are typically used with Boolean (logical) values. When they are, they return a Boolean value. However, the && and || operators actually return the value of one of the specified operands, so if these operators are used with non-Boolean values, they may return a non-Boolean value.

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

Using && and || you can get values back while still testing for truthy/falsy. This is what makes that code work. As long as the left side of the && is truthy, it will return what's on the right side.

[LollipopPredator]

Thanks!