Correct way to define an empty dom element in React

Question

I send an optional parameter checkbox inside a prop to a component:

var checkBox = this.props.checkbox ?          


        

Answer 1

Use false, null or undefined.

This snippet shows the behaviour of rendering falsy values in React:

false, null and undefined don't generate anything:

BeforeAfter
BeforeAfter
BeforeAfter

Whereas '', 0 and NaN do:

Before0After
BeforeAfter
BeforeNaNAfter

As a convenience. you can conditionally generate content inline if the value you're testing against will be false, null or undefined when the conditional content shouldn't be displayed:

    ...
    {this.props.checkbox && }
    ...