javascript - Uncaught TypeError: Cannot read property 'toUpperCase' of undefined react state item -

i'm new react , javascript , i'm trying render following react component:

'use strict'; var react = require('react'); import toreadlist './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 (<div>         <form onsubmit={this.handlesubmit}><input type="text" ref="booktitleinput"></input>             <input type="submit"></input></form>             <toreadlist booktitles={this.state.booktitles} />     </div>            ); } });  module.exports = toread; 

but having following error on console: "uncaught typeerror: cannot read property 'touppercase' of undefined"

i tried debug (because error obscure me , no line in code indicated) , noticed particular line:

this.state.booktitles.push() 

causes error.

please help!

edit error caused webpack var injection function:

function autogeneratewrapperclass(type) {       return reactclass.createclass({         tagname: type.touppercase(),         render: function() {           return new reactelement(             type,             null,             null,             null,             null,             this.props           );         }       });     } 

my appologies poor quality of post.

i resolved issue.

finally, problem came included component:

<toreadlist booktitles={this.state.booktitles} /> 

the error appeared when this.state.booktitles.push(react.finddomnode(this.refs.booktitleinput).value.trim()); called because booktitles triggers error inside component when not empty (i.e <toreadlist booktitles={["mastery", "foundation"]} /> triggers same error)

the compenent in question's code such:

'use strict'; var react = require('react'); import {toreadlistitem} './todoreadlistitem.js';  var toreadlist = react.createclass({     render: function() {         return (<ul>             {this.props.booktitles.map(function(booktitle){                  return (<li>                     <toreadlistitem booktitle={booktitle} ischecked={false}/>                 </li>);             })}         </ul>);     }  });  module.exports = toreadlist; 

changing line:

import {toreadlistitem} './todoreadlistitem.js'; 

to this:

import toreadlistitem './todoreadlistitem.js'; 

i know, not great idea mix es6 syntax flat one, permit myself doing since app experimentation purposes.

i hope helped make things clearer.