React.createElement: type should not be null, undefined.. When creating/rendering components

Question

So the full error is as follows...

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 `IndexBody.

I'm not sure why I'm receiving this error, I thought I created my component properly but maybe another eye can see what I'm doing wrong.

index.jsx:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Test from './app';


class IndexBody extends React.Component {

  render() {
    return (
      <div>
        <h1>This will show the Test Component</h1>
        <Test />
      </div>
    );
  }
}

ReactDOM.render(<IndexBody />, document.getElementById('react-app'))

And my imported Test component from ./app.jsx

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';


class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hello: 'hello world',
    };
  }

  render() {
    console.log('WORKS'); // logs fine

    return (
      <div>
        <h1>{this.state.hello}</h1>
      </div>
    );
  }
}

ReactDOM.render(<Test/>, document.getElementById('react-app'));

I'm able to display the log, but it doesn't want to render the component. Am I incorrectly creating components? Thank you for your help in advance!

Dave Newton · Accepted Answer · 2016-07-30 01:52:43Z

1

You don't export Test from app.jsx.

This means it's not available as an import, thus the undefined.

Based on your current code you'd need to add:

export default Test;

to app.jsx.

answered Jul 30, 2016 at 1:52

Dave Newton

161k27 gold badges264 silver badges311 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Sidelinger · Accepted Answer · 2016-07-30 02:02:10Z

Dave is correct, you need to do export default Test; at the bottom of App.jsx. Also, you only want one ReactDOM.render() function in you entire app, index.jsx loads the component tree it all gets passed to ReactDOM.render() in the one file (index.jsx).

So in your case just change app.jsx to this and you should be in business:

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';


class Test extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            hello: 'hello world',
        };
    }

    render() {
        console.log('WORKS'); // logs fine

        return (
            <div>
                <h1>{this.state.hello}</h1>
            </div>
        );
    }
}

export default Test;

Collectives™ on Stack Overflow

React.createElement: type should not be null, undefined.. When creating/rendering components

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related