title: Uncaught Error: Invariant Violation Error
body: <p>I am trying to display a simple table of data using React. I get the error</p>
  
  <p>"Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 1 of element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a  when using tables, nesting tags like , <p>, or , or using non-SVG elements in an  parent. Try inspecting the child nodes of the element with React ID <code>.0.1.0</code>."</p>
  
  <p>Not sure why this is happening</p>
  
  <p>Here is the code</p>
  
  <pre><code> render: function() {
  
        self = this;
  
  
        // render each campaign row
        var campaigns = this.state.campaigns.map(function(p){
          return &lt;CampaignItem key={p.id} campaignName={p.campaign_name} /&gt;
        });
  
        console.log(campaigns)
  
  
        // if nothing is loaded
        if(!campaigns.length){
            campaigns = &lt;p&gt;Loading campaigns..&lt;/p&gt;;
        }
        return (
          &lt;div&gt;
            &lt;h2&gt;Campaigns&lt;/h2&gt;
            &lt;div className="table-responsive"&gt;
              &lt;table className="table table-bordered table-striped"&gt;
                &lt;thead&gt;
                  &lt;th&gt;
                    &lt;tr&gt;
                      &lt;th&gt;
                      Campaign Name
                      &lt;/th&gt;
                    &lt;/tr&gt;
                  &lt;/th&gt;
                &lt;/thead&gt;
  
                &lt;tbody&gt;
                  {campaigns}
                &lt;/tbody&gt;
  
              &lt;/table&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
        );
    }
  });
  
  
  var CampaignItem = React.createClass({
  
  
    render: function() {
      return (
        &lt;tr&gt;
          &lt;td&gt;{this.props.campaignName}
          &lt;/td&gt;
  
        &lt;/tr&gt;
      );
    }
  
  });
  </code></pre>