Modelesq Modelesq - 4 months ago 176
Javascript Question

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

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!

Answer

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.