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:
React // This JSX:React.render(<divid="msg">HelloWorld!</div>, mountNode);// Is transformed to this JS:React.render(React.createElement("div",{id:"msg"},"Hello World!"),mountNode);This means that if statements don't fit in. Take this example:
// This JSX:<divid={if(condition){'msg'}}>HelloWorld!</div>// Is transformed to this JS:React.createElement("div",{id:if(condition){'msg'}},"Hello World!");That's not valid JS. You probably want to make use of a ternary expression:
React.render(<divid={condition?'msg':''}>HelloWorld!</div>, mountNode);If a ternary expression isn't robust enough, you can use if statements to determine which components should be used.
varloginButton;if(loggedIn){loginButton=<LogoutButton/>;}else{loginButton=<LoginButton/>;}return(<nav><Home/>{loginButton}</nav>)Try using it today with the JSX compiler.
