"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 <...
