Why does React resolve undefined/boolean/null to string only when they are variables?

user_8082620 0
Viewed 3372

I'm trying to wrap my head around JSX. I've found a very weird behavior. This is my code:

const name = undefined;
const myFunc = () => undefined;
let template = (
  <div>
    {myFunc()}
    {name}
    {undefined}
  </div>
);

ReactDOM.render(template, document.querySelector("#root"));

The output is one time: undefined

Why is the const "name" the only undefined value that is resolved to a string? What is the difference between this const and the other two expressions? (Same with Boolean and null.) Please see my code here: codepen

jsx reactjs javascript
3 Answers

That's because JSX is syntactic sugar for React.createElement(component, props, ...children)
It will ignore these types (see DOCS):

  • Boolean
  • undefined
  • null

I just realized that this happens only on some editors like codepen because they run the code in the global context and window.name will always be a string.

window.name will convert all values to their string representations by using the toString method.

If you change the variable to something else, lets say name1 it behaves as expected. 

const name1 = undefined;
const myFunc = function(){return undefined};
let template = (
  <div>
    {name1}
    {undefined}
    {myFunc()}
  </div>
);

By the way, stack-snippets behave the same:

console.log('name is ', name);
const name = undefined;
console.log('and now name is ', name);
const name1 = undefined;
const myFunc = function(){return undefined};
let template = (
  <div>
    {name}
    {name1}
    {undefined}
    {myFunc()}
  </div>
);

ReactDOM.render(template, document.querySelector("#root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Other Editors like codesandbox or jsfiddle will wrap the code in a function, hence there is no conflict with the window.name.

user_31488070

The output here would be empty between your divs. I put this code into jsfiddle to demonstrate:

const name = undefined;
const myFunc = () => undefined;
let template = (
  <div>
    {myFunc()}
    {name}
    {undefined}
    Hello world
  </div>
);

Notice all you can see is the "Hello world" that I added.

user_70035280

It's because the global variable name is the property window.name and will always be a string.

window.name will convert all values to their string representations by using the toString method. 

name = undefined
foo = undefined
console.log('`name` is a', typeof name, ', but `foo` is a', typeof foo)

Use a different global variable name, and it should work as expected. But you should typically not use global constants in your templates anyway.

user_19778470
Related