[React] Conditional Rendering

We always use the follow two ways to conditional render in JSX:

• Ternary(Conditional) operator

render() {
    return (
      <div>  
        xxx
        <div>{ shouldShow ? 'Hey' : null }</div>
        xxx
      </div>
    );
  }

• Logical conjunction

render() {
    return (
      <div>  
        xxx
        <div>{ shouldShow && 'Hey'}</div>
        xxx
      </div>
    );
  }

false, null, undefined, and true are valid children. They will be ignored( and skips the second expression), and simply don't render. These JSX expressions will all render to the same thing:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

This JSX only renders the string Hey only when shouldShow is true:

And one thing special is that, when shouldShow is an integer 0:

For ternary operator, it will not render any thing.
For logical conjunction, it will rend an integer 0 there.

Actually, there are multiple ways to conditional show, if you are interesting with them, checkout them here.
if statement
ternary operation
logical && operator
switch case operator
enums
Multi-Level Conditional Rendering
With Higher Order Components
External Templating Components