title: React .createClass() scroll to ref: scrollIntoView not a function
body: <p>I'm having trouble figuring out what's wrong when I'm trying to scroll to a "ref". I've been searching like mad and found urls which make complete sense, but it won't work in my scenario.</p>
  
  <ul>
  <li><a href="https://github.com/yannickcr/eslint-plugin-react/issues/678" rel="noreferrer">https://github.com/yannickcr/eslint-plugin-react/issues/678</a></li>
  <li><a href="http://codepen.io/takatama/pen/mVvbqx" rel="noreferrer">http://codepen.io/takatama/pen/mVvbqx</a></li>
  </ul>
  
  <p>I have an app using react 15.4.2 along with react-router 3.0.0. I have a route to a component that takes an optional route parameter and am trying to use that to scroll to the element on componentDidUpdate(). I've tried implementing a couple different ways but in following the most recent implementation of ref.scrollIntoView() I get an error...</p>
  
  <blockquote>
    <p>scrollIntoView is not a function</p>
  </blockquote>
  
  <p>I made sure that the "ref callbacks" exist at the time of componentDidUpdate().</p>
  
  <p>Am I just missing something like using .createClass() is missing methods you get when using a class definition or am I approaching this entirely wrong?</p>
  
  <p>I could just jump to using a package, but things like this in not being able to understand what's going on when being as native as I can bother me.</p>
  
  <blockquote>
    <p><em>Code has been simplified to showcase the issue while maintaining a similar flow. There may be discrepancies in code syntax.</em></p>
  </blockquote>
  
  <p><strong>APP</strong></p>
  
  <pre><code>const App = React.createClass({
      render() {
          return (
              &lt;Router history={ appHistory }&gt;
                  &lt;Route path='home' component={ Home }&gt;
                      &lt;IndexRoute component={ Page } /&gt;
                      &lt;Route path='page(/:itemIndex)' component={ Page } /&gt;
                  &lt;/Route&gt;
                  &lt;Route path='add-new-item' component={ AddNewItem } /&gt;
              &lt;/Router&gt;
          )
      }
  });
  </code></pre>
  
  <p><strong>HOME</strong>
  is just a wrapper with a nav bar that renders children based on an active index</p>
  
  <p><strong>ADD NEW ITEM</strong>
  is a component which will goto /page/[index of newly created item]</p>
  
  <p><strong>PAGE</strong></p>
  
  <pre><code>const Page = React.createClass({
      getInitialState() {
          return {
              data: undefined,
              scrollTo: parseInt(this.props.params.goalIndex) || undefined
          };
      },
  
      componentWillMount() {
          // this gets data and does a setState for data
      },
  
      componentDidUpdate() {
          let { scrollTo } = this.state;
  
          if( scrollTo &amp;&amp; this['item-' + scrollTo] ) {
              this['item-' + scrollTo].scrollIntoView();
          }
      },
  
      renderTiles() {
          return this.state.data.map( ( item, index ) =&gt; {
              return (
                  &lt;Item
                      key={ 'item-' + index }
                      ref={ node =&gt; this['item-' + index] = node }
                  &gt;
                      &lt;p&gt;foo bar...&lt;/p&gt;
                  &lt;/Item&gt;
              )
          });
      },
  
      render() {
          return (
              &lt;div&gt;
                  { this.state.data &amp;&amp; this.renderTiles() }
              &lt;/div&gt;
          );
      }
  });
  </code></pre>