<story><title>What should go into JSX 2.0?</title><url>https://github.com/facebook/jsx/issues/65</url></story><parent_chain><item><author>maaaats</author><text>I like how the &lt;i&gt;if&lt;/i&gt; proposal is down voted, probably because it&amp;#x27;s mentioning Angular. Conditional rendering in React is not always very clean. Most codebases end up resorting with something similar to this in a container to show a spinner while data is loading and rendering it when done.&lt;p&gt;&amp;lt;ConditionalSpinner renderIf={data}&amp;gt;&amp;lt;PersonRenderer person={data.person} &amp;#x2F;&amp;gt;&amp;lt;&amp;#x2F;ConditionalSpinner&amp;gt;&lt;p&gt;Problem is that the inner component will still be parsed and fail with cannot read property person of undefined. Yes, you can do this with a simple condition in your render function, but then it&amp;#x27;s not declarative any more.</text></item></parent_chain><comment><author>woah</author><text>You think it&amp;#x27;s downvoted because it mentions Angular? Baseless complaining. JSX is a breath of fresh air after all the templating languages that force you to learn a crippled pseudolang. What&amp;#x27;s next? For loops? Moving every feature that already exists in JavaScript into JSX with some arbitrary additional syntax? What&amp;#x27;s the point? It&amp;#x27;s already very easy to do conditionals with &amp;amp;&amp;amp; or ternaries.</text></comment>
<story><title>What should go into JSX 2.0?</title><url>https://github.com/facebook/jsx/issues/65</url></story><parent_chain><item><author>maaaats</author><text>I like how the &lt;i&gt;if&lt;/i&gt; proposal is down voted, probably because it&amp;#x27;s mentioning Angular. Conditional rendering in React is not always very clean. Most codebases end up resorting with something similar to this in a container to show a spinner while data is loading and rendering it when done.&lt;p&gt;&amp;lt;ConditionalSpinner renderIf={data}&amp;gt;&amp;lt;PersonRenderer person={data.person} &amp;#x2F;&amp;gt;&amp;lt;&amp;#x2F;ConditionalSpinner&amp;gt;&lt;p&gt;Problem is that the inner component will still be parsed and fail with cannot read property person of undefined. Yes, you can do this with a simple condition in your render function, but then it&amp;#x27;s not declarative any more.</text></item></parent_chain><comment><author>biscarch</author><text>Loading (and error, etc) state should be the responsibility of the component doing the content rendering, not the parent. So the ConditionalSpinner component:&lt;p&gt;&lt;pre&gt;&lt;code&gt;   &amp;lt;ConditionalSpinner renderIf={data}&amp;gt;&amp;lt;PersonRenderer person={data.person} &amp;#x2F;&amp;gt;&amp;lt;&amp;#x2F;ConditionalSpinner&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
Could be written better as:&lt;p&gt;&lt;pre&gt;&lt;code&gt;   &amp;lt;PersonRenderer person={data.person} &amp;#x2F;&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
Where PersonRenderer would be defined as such:&lt;p&gt;&lt;pre&gt;&lt;code&gt;   class PersonRenderer extends Component {
     render() {
       if(this.props.person) {
         return &amp;lt;div&amp;gt;personcontent&amp;lt;&amp;#x2F;div&amp;gt;
       }
       return &amp;lt;LoadingIndicator&amp;#x2F;&amp;gt;
     }
   }
&lt;/code&gt;&lt;/pre&gt;
Given this, I&amp;#x27;m still not sure how an If &amp;quot;component&amp;quot; would be achieved (and further, you&amp;#x27;d need an Else or a Switch component anyway if going down this route). Maybe you could explain the benefits of such a path?</text></comment>