What to return in ternary operator in React's JSX when want to return nothing?

Question

I want the ternary operator result to return nothing if variable is false, but what would I put after the semicolon? I'm sure there is a common practice of what to do here, but this has been my makeshift approach

  render() {
    const { classes, conversation } = this.props;
    return (
        {conversation
          ? (<Box className={classes.chipHolder}>
              <Chip
                label={this.state.numOfUnviewedMessages}
                size="small"
                color="primary"
              />
            </Box>) 
          : (<div/>)
        }
    );
}

You can return `null` - https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering — Ori Drori, Jun 14 '21 at 21:28
Or just conditionally return the child `{ conversation && ... }` — olle, Jan 24 '23 at 11:23

Dimitri Kopriwa · Answer 1 · 2023-01-24T11:18:08.960

You can return null:

class App() {

  render() {
    const { classes, conversation } = this.props;
    return conversation ? (
      <Box className={classes.chipHolder}>
        <Chip
          label={this.state.numOfUnviewedMessages}
          size="small"
          color="primary"
        />
      </Box>
    ) : null)
  }
  
}

Source: https://reactjs.org/docs/conditional-rendering.html#preventing-component-from-rendering

What to return in ternary operator in React's JSX when want to return nothing?

1 Answers1

Linked