Compound Conditions: "bad" example is a syntax error

[rcreasi]

Under Compound Conditions the following example of bad style appears:

// bad
render () {
  return <div>{if (this.state.happy && this.state.knowsIt) { return "Clapping hands" }</div>;
}

This is not merely bad style; it's a syntax error. Firstly, the curly braces aren't balanced. Secondly, even if we balanced them, if (...) { return ... } is not an expression so it cannot be embedded in JSX.

The example should read

// bad
render () {
  return <div>{(this.state.happy && this.state.knowsIt) && "Clapping hands" }</div>;
}