javascript - 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 ? <span className='checkbox'></span> : null;

Then I put it like this:

<div>
    ...
    {checkBox}
    ...
</div>

As seen from above, I assign null to the variable. But I can instead assign empty string '' which seems to give the same result.

What's the proper one?

question from:https://stackoverflow.com/questions/30097091/correct-way-to-define-an-empty-dom-element-in-react

Answer 1

You need to use null. If you use an empty string like '' then react will create an empty span dom element, so it's not the same.

var label1 = <label>My Label</label>; // react generates a label element
var label2 = null; // react doesn't generate any dom element
var label3 = ''; // react generates and empty span like <span></span>