Ref gives the wrong element after the first render

I have a component called AppPane which has this render method (simplified):

render({children}) {
    return (
      <div ref={el => {
          console.log(el)
          this.rootEl = el
        }}>
        {children}
      </div>
    )
  }

The first console.log correctly logs the div element. But subsequent renders log AppPane. I can still access this.rootEl.base to get access to the div, so I do have a workaround.

[chrisdavies]

I’d never heard of webpackbin… It is awesome.

Here’s the repro. You can click anywhere on the screen to increment the counter. Open up the browser console and you’ll see the issue:

http://www.webpackbin.com/E1WAAp22x

[developit]

would be useful. Try webpackbin.com if you haven’t yet, it’s awesome. 👍