"React embraces the idea of tying markup and logic that generates the markup together. This means that we can use the power of JavaScript for loops and conditionals."
"But if/else logic is a bit hard to express in markup. Therefore, in JSX, we can't use conditional statements such as if/else."
// Using if/else directly doesn't work <div className={if(success) { 'green' } else { 'red' }}/> Error: Parse Error: Line 1: Unexpected token if
"Instead, we can use a ternary operator for specifying the if/else logic."
// Using ternary operator <div className={ success ? 'green' : 'red' }/> React.createElement("div", {className: success ? 'green' : 'red'})
"But ternary operator gets cumbersome with large expressions when we want to use the React component as a child. In this case, it's better to offload the logic to a block or maybe a function" Mike added.
// Moving if/else logic to a function var showResult = function() { if(this.props.success === true) return <...