render() {<br /> return (<br /> <a className=”navbar-brand” {… url ? {href: url} : {}}>Logo</a><br /> )<br /> }

return (<br /> <Button {…(condition ? {className: ‘btn btn-primary’} : {})} /><br /> );

var InputComponent = React.createClass({<br /> render: function() {<br /> var required = true;<br /> var disabled = false;</p> <p> return (<br /> <input type=”text” disabled={disabled} required={required} /><br /> );<br /> }<br /> });

/*<br /> && works best in conditionals that will sometimes do an action, but other times do<br /> NOTHING at all.<br /> */</p> <p>const tasty = (<br /> <ul><br /> <li>Applesauce</li><br /> { !baby && <li>Pizza</li> }<br /> { age > 15 && <li>Brussels Sprouts</li> }<br /> { age > 20 && <li>Oysters</li> }<br /> { age > 25 && <li>Grappa</li> }<br /> </ul><br /> );</p> <p>/*<br /> If the expression on the left of the && evaluates as true, then the JSX on the<br /> right of the && will be rendered. If the first expression is false, however, then<br /> the JSX to the right of the && will be ignored and not rendered.<br /> */

// JSX and conditional<br /> // In JSX, && is commonly used to render an element based on a boolean condition. && works best in conditionals that will sometimes do an action, but other times do nothing at all.</p> <p>// If the expression on the left of the && evaluates as true, then the JSX on the right of the && will be rendered. If the first expression is false, however, then the JSX to the right of the && will be ignored and not rendered.<br /> // All of the list items will display if<br /> // baby is false and age is above 25<br /> const tasty = (<br /> <ul><br /> <li>Applesauce</li><br /> { !baby && <li>Pizza</li> }<br /> { age > 15 && <li>Brussels Sprouts</li> }<br /> { age > 20 && <li>Oysters</li> }<br /> { age > 25 && <li>Grappa</li> }<br /> </ul><br /> );

style={{backgroundColor: $post.type === “team_member” ? ‘green’: ‘not_a_team_member’}}