writing if-else in jsx while writing react code is not working.
<div id={if (condition) { 'msg' }}>Hello World!</div>
However using ternary operator works.
<div id={condition ? 'msg' : null}>Hello World!</div>
why is this happening?
3 Answers
Your JSX of
<div id={condition ? 'msg' : null}>Hello World!</div>
which is not valid Javascript by itself, will be compiled into the following ReactJS call:
React.createElement(
'div', // Element "tag" name.
{ id: condition ? 'msg' : null }, // Properties object.
'Hello World!' // Element contents.
);
which is valid Javascript, ready to be interpreted/compiled by your Javascript runtime environment. As you can see, there is no way to jam an if-else into that statement, as it cannot be compiled into valid Javascript.
You could instead use an immediately-invoked function expression and pass the value returned from within:
<div id={(function () {
if (condition) {
return "msg";
} else {
return null;
}
})()}>Hello World!</div>
which will compile into the following valid Javascript:
React.createElement(
"div",
{
id: (function () {
if (condition) {
return "msg";
} else {
return null;
}
})()
},
"Hello World!"
);
Comments
if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. React Docs
Comments
// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>
// Is transformed to this JS:
React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
So, you see if/else does not fit in this model. Better to use it outside of jsx. may be in render function.
Comments
ifisn't an rvalue?