Sergei Basharov Sergei Basharov - 1 month ago 4x
React JSX Question

Correct way to define an empty dom element in React

I send an optional parameter

inside a prop to a component:

var checkBox = this.props.checkbox ? <span className='checkbox'></span> : null;

Then I put it like this:


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?


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>