react.dev/cookbook/03-if-else-in-JSX.md

id	title	layout	permalink	prev	next
if-else-in-JSX	If-Else in JSX	cookbook	if-else-in-JSX.html	inline-styles.html	self-closing-tag.html

Problem

You want to use conditionals in JSX.

Solution

Don't forget that JSX is really just sugar for functions:

/** @jsx React.DOM */

// this
React.renderComponent(<div id="msg">Hello World!</div>, mountNode);
// is the same as this
React.renderComponent(React.DOM.div({id:"msg"}, "Hello World!"), mountNode);

Which means <div id={if (true){ 'msg' }}>Hello World!</div> doesn't make sense, as (if it worked) it would be compiled down to something like this React.DOM.div({id: if (true){ 'msg' }}, "Hello World!"), which isn't valid JS.

What you're searching for is ternary expression:

/** @jsx React.DOM */

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

Discussion

Try the JSX compiler.