If-Else in JSX

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction. Take this basic example:

/** @jsx React.DOM */

// This JSX:
React.renderComponent(<div id="msg">Hello World!</div>, mountNode);

// Is transformed to this JS:
React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);

This means that if statements don't fit in. Take this example:

/** @jsx React.DOM */

// This JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

// Is transformed to this JS:
React.DOM.div({id: if (condition) { 'msg' }}, "Hello World!");

That's not valid JS. You probably want to make use of a ternary expression:

/** @jsx React.DOM */

React.renderComponent(<div id={condition ? 'msg' : ''}>Hello World!</div>, mountNode);

If a ternary expression isn't robust enough, you can use if statements to determine which components should be used.

/** @jsx React.DOM */

var loginButton;
if (loggedIn) { 
  loginButton = <LogoutButton />; 
} else { 
  loginButton = <LoginButton />; 
}

return (
  <nav>
    <Home />
    {loginButton}
  </nav>
)

Try using it today with the JSX compiler.

← Prev Next →