Be the first user to complete this post

  • 0
Add to List

Uncaught TypeError: Cannot read property 'toUpperCase' of undefined in React

Ok, I gotta admit this is a really annoying issue because its root cause is pretty trivial. You get this issue in React when

You are accidentally trying to render a component and that component itself is null or undefined. e.g you are trying to render <MyComponent /> when the value of MyComponent is itself null or undefined.
Ive encountered this issue several times, the most recent being when upgrading to react-router 1.0 release candidate which eliminated the the <RouteHandler /> component. As a result, at places in my tree where I was doing a require for RouteHandler, things worked because it simply returned undefiend, but the moment I tried to render it using <RouteHandler /> React gave me this pretty little error. Hope this helps you save some productive time!



Also Read:

  1. Passing the store down implicitly via context in a react redux app
  2. Pass props to the handler component in react-router
  3. Pass down props using React childContextTypes in a deeply nested component tree
  4. Using React with Backbone Models
  5. Execution sequence of a React component's lifecycle methods
  6. webpack with babel6 and react
  7. Pure vs Impure functions
  8. Require the css file of a package using webpack