ReactJS giving inst.render is not a function error

TypeError: instance.render is not a function error comes when you don't have a render() function in your React component.

I ran into this error when a component I was rendering was undefined. I had never seen the error before. My app was also using redux.

In my case it was just a <Book /> component in the render() method that wasn't defined.

So the fix was easy:

import Book from './Book'

My advice if you run into this issue is to check the render method of the container component and see if any components you are trying to render have not been defined.

It seems very strange to me, It should give the following error:

Uncaught (in promise) ReferenceError: Book is not defined

Original

To use React with ES6, you need to inherit the React.Component class.

class Hello extends React.Component {
  render() {
    return <h1>Hi</h1>
  }
}

See here at its documentation.

Update

You can also use function, or arrow in your case. However you need to return the component.

const Hello = () => <h1>Hi</h1>;

Notice the missing curly braces. In ES6, an arrow function without curly braces returns the result of its body expression.