Tag: react

How I Fixed: Warning: React.createElement: type should not be null, undefined, boolean, or number.

I’ve been going through a lot of React JS training materials and tutorials as of late, and am slowly getting the point where I try to do it myself first, without simply typing out the tutorial pages.

Tonight, I hit upon a fun issue which I couldn’t find an immediate Google / Stack Overflow answer for. Perhaps my Google-foo is weak.

The example I was working from was the brilliant Redux Reddit API tutorial from the official Redux docs.

The two errors I kept running into were: 

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `AsyncApp`.

// and

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `AsyncApp`.

Both found in the browser console log, and stopped the app from rendering.

The solution here is really straightforward, but let’s see the code I was using, to see if you can spot the problem first:

import React, { Component } from 'react';
import { fetchPosts } from '../actions/actions';
import { Posts } from '../components/Posts';

export default class AsyncApp extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Posts />
    );
  }
}

And:

import React, { Component } from 'react';

export default class Posts extends Component {
  render() {
    return (
      <ul>
        <li>hello 1</li>
        <li>hello 2</li>
        <li>hello 3</li>
      </ul>
    );
  }
}

The cause was certainly not immediately obvious to me. But here’s the issue:

export default class Posts extends Component

and then, in AsyncApp I was doing:

import { Posts } from '../components/Posts';

Well, if the class being exported is default then the import statement should instead be :

import Posts from '../components/Posts';

I found this Stack Overflow explanation very helpful in expanding my understanding of why this issue occurred.

Basic React ES6 Class Example

Sometimes it’s the super easy stuff I forget how to do.

It’s really straightforward to create a WebStorm Live Template for a React ES6 Class template.

But when you’re first starting to learn things like this, I find just repeatadly typing it out every time I want to make a new React ES6 class really helps grind it into my memory:

import React from 'react';

class YourClassNameHere extends React.component {

  render() {
    return (
      <div className="yourCssClassName">

      </div>
    );
  }

}

YourClassNameHere.propTypes = {
  pair: React.PropTypes.array.isRequired
};

export default YourClassNameHere;