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

up vote
6
down vote

favorite

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

edited 9 mins ago

Boann

36k1286116

asked 4 hours ago

Nave Hazan

19612

2

Technically nothing should be displayed since all falsy values should be ignored. It seems one of the values gets stringified somehow.
â€“Â Sulthan
4 hours ago

2

Cant reproduce in JsFiddle, what React version do you use?
â€“Â Marcel T.
3 hours ago

add a commentÂ |Â

up vote
6
down vote

favorite

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

edited 9 mins ago

Boann

36k1286116

asked 4 hours ago

Nave Hazan

19612

2

Technically nothing should be displayed since all falsy values should be ignored. It seems one of the values gets stringified somehow.
â€“Â Sulthan
4 hours ago

2

Cant reproduce in JsFiddle, what React version do you use?
â€“Â Marcel T.
3 hours ago

add a commentÂ |Â

up vote
6
down vote

favorite

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

edited 9 mins ago

Boann

36k1286116

asked 4 hours ago

Nave Hazan

19612

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

reactjs jsx

edited 9 mins ago

Boann

36k1286116

asked 4 hours ago

Nave Hazan

19612

edited 9 mins ago

Boann

36k1286116

asked 4 hours ago

Nave Hazan

19612

edited 9 mins ago

Boann

36k1286116

edited 9 mins ago

Boann

36k1286116

edited 9 mins ago

Boann

36k1286116

asked 4 hours ago

Nave Hazan

19612

asked 4 hours ago

Nave Hazan

19612

asked 4 hours ago

Nave Hazan

19612

2

Technically nothing should be displayed since all falsy values should be ignored. It seems one of the values gets stringified somehow.
â€“Â Sulthan
4 hours ago

2

Cant reproduce in JsFiddle, what React version do you use?
â€“Â Marcel T.
3 hours ago

add a commentÂ |Â

2

Technically nothing should be displayed since all falsy values should be ignored. It seems one of the values gets stringified somehow.
â€“Â Sulthan
4 hours ago

2

Cant reproduce in JsFiddle, what React version do you use?
â€“Â Marcel T.
3 hours ago

Technically nothing should be displayed since all falsy values should be ignored. It seems one of the values gets stringified somehow.
â€“Â Sulthan
4 hours ago

Cant reproduce in JsFiddle, what React version do you use?
â€“Â Marcel T.
3 hours ago

add a commentÂ |Â

3 Answers
3

active

oldest

votes

up vote
5
down vote

accepted

That's because JSX is syntactic sugar for React.createElement(component, props, ...children)

It will ignore these types (see DOCS):

Boolean

undefined

null

~~But const name = undefined is not JSX, and as far as i know it will get interpolated as a string.~~

I just realized that this happens only in 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.

edited 2 hours ago

answered 3 hours ago

Sagiv b.g

14.6k21552

add a commentÂ |Â

up vote
0
down vote

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.

answered 4 hours ago

Yoni Weisbrod

New contributor

Please take a look here:codepen.io/navehazan/pen/YJvZom
â€“Â Nave Hazan
3 hours ago

add a commentÂ |Â

up vote
0
down vote

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.

edited 2 hours ago

answered 2 hours ago

HÃ¥ken Lid

9,65052440

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52904143%2fwhy-does-react-resolve-undefined-boolean-null-to-string-only-when-they-are-varia%23new-answer', 'question_page');

);

Post as a guest

Name

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
5
down vote

accepted

That's because JSX is syntactic sugar for React.createElement(component, props, ...children)

It will ignore these types (see DOCS):

Boolean

undefined

null

~~But const name = undefined is not JSX, and as far as i know it will get interpolated as a string.~~

I just realized that this happens only in 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.

edited 2 hours ago

answered 3 hours ago

Sagiv b.g

14.6k21552

add a commentÂ |Â

up vote
5
down vote

accepted

That's because JSX is syntactic sugar for React.createElement(component, props, ...children)

It will ignore these types (see DOCS):

Boolean

undefined

null

~~But const name = undefined is not JSX, and as far as i know it will get interpolated as a string.~~

I just realized that this happens only in 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.

edited 2 hours ago

answered 3 hours ago

Sagiv b.g

14.6k21552

add a commentÂ |Â

up vote
5
down vote

accepted

That's because JSX is syntactic sugar for React.createElement(component, props, ...children)

It will ignore these types (see DOCS):

Boolean

undefined

null

~~But const name = undefined is not JSX, and as far as i know it will get interpolated as a string.~~

I just realized that this happens only in 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.

edited 2 hours ago

answered 3 hours ago

Sagiv b.g

14.6k21552

That's because JSX is syntactic sugar for React.createElement(component, props, ...children)

It will ignore these types (see DOCS):

Boolean

undefined

null

~~But const name = undefined is not JSX, and as far as i know it will get interpolated as a string.~~

I just realized that this happens only in 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.

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>

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>

edited 2 hours ago

answered 3 hours ago

Sagiv b.g

14.6k21552

edited 2 hours ago

answered 3 hours ago

Sagiv b.g

14.6k21552

answered 3 hours ago

Sagiv b.g

14.6k21552

answered 3 hours ago

Sagiv b.g

14.6k21552

add a commentÂ |Â

up vote
0
down vote

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.

answered 4 hours ago

Yoni Weisbrod

New contributor

Please take a look here:codepen.io/navehazan/pen/YJvZom
â€“Â Nave Hazan
3 hours ago

add a commentÂ |Â

up vote
0
down vote

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.

answered 4 hours ago

Yoni Weisbrod

New contributor

Please take a look here:codepen.io/navehazan/pen/YJvZom
â€“Â Nave Hazan
3 hours ago

add a commentÂ |Â

up vote
0
down vote

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.

answered 4 hours ago

Yoni Weisbrod

New contributor

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.

answered 4 hours ago

Yoni Weisbrod

New contributor

answered 4 hours ago

Yoni Weisbrod

New contributor

answered 4 hours ago

Yoni Weisbrod

answered 4 hours ago

Yoni Weisbrod

New contributor

Yoni Weisbrod is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

Please take a look here:codepen.io/navehazan/pen/YJvZom
â€“Â Nave Hazan
3 hours ago

add a commentÂ |Â

Please take a look here:codepen.io/navehazan/pen/YJvZom
â€“Â Nave Hazan
3 hours ago

Please take a look here:codepen.io/navehazan/pen/YJvZom
â€“Â Nave Hazan
3 hours ago

add a commentÂ |Â

up vote
0
down vote

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.

edited 2 hours ago

answered 2 hours ago

HÃ¥ken Lid

9,65052440

add a commentÂ |Â

up vote
0
down vote

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.

edited 2 hours ago

answered 2 hours ago

HÃ¥ken Lid

9,65052440

add a commentÂ |Â

up vote
0
down vote

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.

edited 2 hours ago

answered 2 hours ago

HÃ¥ken Lid

9,65052440

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.

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

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

edited 2 hours ago

answered 2 hours ago

HÃ¥ken Lid

9,65052440

edited 2 hours ago

answered 2 hours ago

HÃ¥ken Lid

9,65052440

answered 2 hours ago

HÃ¥ken Lid

9,65052440

answered 2 hours ago

HÃ¥ken Lid

9,65052440

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky