title: Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item
body: <p>I'm new to React and Javascript and I'm trying to render the following React component:</p>
  
  <pre><code>'use strict';
  var React = require('react');
  import ToReadList from './toreadlist.js';
  
  var ToRead = React.createClass({
  getInitialState: function() {
      return { bookTitles: [] };
  },
  handleSubmit: function(e) {
      e.preventDefault();
      this.state.bookTitles.push(React.findDOMNode(this.refs.bookTitleInput).value.trim());
      this.setState({items: this.state.bookTitles});
  },
  render: function() {
      return (&lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;&lt;input type="text" ref="bookTitleInput"&gt;&lt;/input&gt;
              &lt;input type="submit"&gt;&lt;/input&gt;&lt;/form&gt;
              &lt;ToReadList bookTitles={this.state.bookTitles} /&gt;
      &lt;/div&gt;
             );
  }
  });
  
  module.exports = ToRead;
  </code></pre>
  
  <p>But I am having the following error on my console: "<strong>Uncaught TypeError: Cannot read property 'toUpperCase' of undefined</strong>"</p>
  
  <p>I tried to debug (because the error is obscure to me and no line in my code is indicated) and noticed that this particular line:</p>
  
  <pre><code>this.state.bookTitles.push()
  </code></pre>
  
  <p>causes the error.</p>
  
  <p>Please help!</p>
  
  <p><strong>Edit</strong> 
  The error is caused by a webpack var injection function:</p>
  
  <pre><code>function autoGenerateWrapperClass(type) {
        return ReactClass.createClass({
          tagName: type.toUpperCase(),
          render: function() {
            return new ReactElement(
              type,
              null,
              null,
              null,
              null,
              this.props
            );
          }
        });
      }
  </code></pre>