title: React outer div assigned wrong id
body: <p>I have render functions that look something like this:</p>
  
  <pre><code>render_login: function() {
    return &lt;div&gt;
      &lt;div className='form_container'&gt;
        &lt;div className='logo' /&gt;
        {
          this.state.alert ?
          &lt;div className='alert fading'&gt;
            { this.some_prop }
          &lt;/div&gt; :
          null
        }
        { this.some_render() }
      &lt;/div&gt;
      { extra_auth_reqd ? this.some_other_render : null }
      { local_conn_btn_present ? &lt;SomeComponent /&gt; : null }
    &lt;/div&gt;;
  },
  
  render: function() {
    if(this.some_prop) {
      return &lt;div&gt;
        &lt;SomeOtherComponent /&gt;;
      &lt;/div&gt;;
    } else {
      return this.render_login();
    }
  }
  </code></pre>
  
  <p>My issue only has to do with <code>render_login</code>. When <code>return this.render_login</code> is run in Chrome, the outer wrapping div gets an id of <code>validatedFactory_view</code> like so: <a href="https://i.stack.imgur.com/eeKKG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eeKKG.png" alt="Chrome"></a></p>
  
  <p>But it works properly and sets the id to <code>login_view</code> (the name of the file) in Firefox like so: <a href="https://i.stack.imgur.com/JnTxH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JnTxH.png" alt="Firefox"></a></p>
  
  <p>Why might this be happening? I could just manually set the id to <code>login_view</code>, which solves the problem, but I would like to understand what causes this behavior.</p>