title: Comparing two components - is Component X an instance of Component A
body: <p>I have a generic component which maps its child components to filter only children of a certain type, as found below.</p>
  
  <p>However, using the property <code>type</code> was a mere guess, and I can't find it documented. Not only that, logging it shows it being a function - which can't be executed. On top of that there's a couple issues that need to be worked around when using Browserify.</p>
  
  <p>Another option would be to read child.prototype.displayName. But that too feels wrong.</p>
  
  <p>Question: Basically, I'm looking for a solid way of comparing whether two ReactJS components are equal.</p>
  
  <p><strong>EXAMPLE</strong></p>
  
  <p>(Updated: not that bad after all)</p>
  
  <pre><code>var Foo = React.createClass({
      render: function() {
          return &lt;div&gt;Foo&lt;/div&gt;;
      }
  });
  
  var Bar = React.createClass({
      render: function() {
          return &lt;div&gt;Bar&lt;/div&gt;;
      }
  });
  
  var Main = React.createClass({
      render: function() {
          var filteredChildren = [];
  
          filteredChildren = React.Children.map(function(child) {
              if (child.type === Foo.type) {
                  return child;
              }
          });
  
          return (
              &lt;div&gt;
                  {filteredChildren}
              &lt;/div&gt;
          );
      }
  });
  
  React.render(&lt;Main&gt;&lt;Foo /&gt;&lt;Bar /&gt;&lt;/Main&gt;, document.body);
  </code></pre>