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:

  1. // This JSX:
  2. ReactDOM.render(<div id="msg">Hello World!</div>, mountNode);
  4. // Is transformed to this JS:
  5. ReactDOM.render(React.createElement("div", {id:"msg"}, "Hello World!"), mountNode);

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

  1. // This JSX:
  2. <div id={if (condition) { 'msg' }}>Hello World!</div>
  4. // Is transformed to this JS:
  5. React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

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

  1. ReactDOM.render(<div id={condition ? 'msg' : null}>Hello World!</div>, mountNode);

If a ternary expression isn’t robust enough, you can use if statements outside of your JSX to determine which components should be used:

  1. var loginButton;
  2. if (loggedIn) {
  3.   loginButton = <LogoutButton />;
  4. } else {
  5.   loginButton = <LoginButton />;
  6. }
  8. return (
  9.   <nav>
  10.     <Home />
  11.     {loginButton}
  12.   </nav>
  13. );

Or if you prefer a more “inline” aesthetic, define immediately-invoked function expressions inside your JSX:

  1. return (
  2.   <section>
  3.     <h1>Color</h1>
  4.     <h3>Name</h3>
  5.     <p>{this.state.color || "white"}</p>
  6.     <h3>Hex</h3>
  7.     <p>
  8.       {(() => {
  9.         switch (this.state.color) {
  10.           case "red":   return "#FF0000";
  11.           case "green": return "#00FF00";
  12.           case "blue":  return "#0000FF";
  13.           default:      return "#FFFFFF";
  14.         }
  15.       })()}
  16.     </p>
  17.   </section>
  18. );

Note:

In the example above, an ES6 arrow function is utilized to lexically bind the value of this.

Try using it today with the Babel REPL.