title: ReactJs - Creating an "If" component... a good idea?
body: <p>I've read in the React docs that "if" type statements can't be used in JSX code, because of the way JSX renders into javascript, it doesn't work out as one would expect.</p>
  
  <p>But is there any reason why implementing an "if" component is a bad idea? It seems to work fine from my initial tests, and makes me wonder why this isn't done more often? </p>
  
  <p>Part of my intent is to allow react development to be as much as possible, markup based - with as little javascript as possible. This approach, to me, feels like more of a "data driven" approach.</p>
  
  <p>You can <a href="http://jsfiddle.net/074ptfpq/7/" rel="noreferrer">check it out here on JS Fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/JSXTransformer.js"&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/react-with-addons.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/jsx"&gt;
  /** @jsx React.DOM */
      
  var If = React.createClass({
    displayName: 'If',
  
    render: function()
    {
      if (this.props.condition)
        return &lt;span&gt;{this.props.children}&lt;/span&gt;
      return null;
    }
  });
  
  var Main = React.createClass({
      render: function() {
          return (
             &lt;div&gt;
               &lt;If condition={false}&gt;
                  &lt;div&gt;Never showing false item&lt;/div&gt;
               &lt;/If&gt;
               &lt;If condition={true}&gt;
                  &lt;div&gt;Showing true item&lt;/div&gt;
               &lt;/If&gt;
            &lt;/div&gt;
          );
      }
  });
  
  React.renderComponent(&lt;Main/&gt;, document.body);
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Running the above results in:</p>
  
  <blockquote>
    <p>Showing true item</p>
  </blockquote>