Error with basic React Example: Uncaught TypeError: undefined is not a function

Asked 29/10, 2014 at 10:14 Answered 9/6, 2016 at 21:56

I'm trying to get react connected into my app. Its a rails app using rails-react (though I don't think that's part of the problem). I'm currently using a very simple 1 component setup:

// react_admin.js.jsx

/** @jsx React.DOM */
var CommentBox = React.createClass({
  render: function() {
    return (
     <div className="commentBox">
       Hello, world! I am a CommentBox.
      </div>
   );
  }
});

React.render(
  <CommentBox />,
  document.getElementById('content')
);

My html file contains:

<body>
  <div id="content"></div>
  <script src="/assets/react.js?body=1"></script>
  <script src="/assets/react_admin.js?body=1"></script>
</body>

I can see that rails-react is converting my react_admin.js.jsx into react_admin.js as follows:

/** @jsx React.DOM */

var CommentBox = React.createClass({displayName: 'CommentBox',
  render: function() {
    return (
      React.DOM.div({className: "commentBox"}, 
        "Hello, world! I am a CommentBox."
      )
    );
  }
});

React.render(
  CommentBox(null),
  document.getElementById('content')
);

However chrome is raising an ''Uncaught TypeError: undefined is not a function'' in the Render.react() call, which it shows between "(" and "CommentBox(null)"

Can someone tell me what I'm doing wrong?

Enarthrosis answered 29/10, 2014 at 10:14 Comment(1)

make sure you have the latest react version which should be v0.12.0. If you have any older versions, you should be using the now depreciated React.renderComponent as @jsanchez suggested below in the answers – Ultimately 29/10, 2014 at 18:47

After 0.14 React moved to ReactDOM.render(), so if you update React, your code should be:

ReactDOM.render(
  <CommentBox />, document.getElementById('content'));

But make sure to include both react.js and react-dom.js in your project since those are now separated.

Clupeoid answered 23/11, 2015 at 20:49 Comment(4)

This is the correct answer for me. I am using v0.15 – Classic 16/6, 2016 at 8:55

I am using like this but getting error. can you please healp me ReactDOM.render(<showData/>, document.getElementById('Ishim')); – D 10/6, 2017 at 19:54

@IshimdarAhamad it's hard to help based on your comment. Maybe you did not import ReactDOM in project? It is not enough to import React. import ReactDOM from 'react-dom'; – Clupeoid 11/6, 2017 at 9:25

Thanks for reverting message, Now it's working, actually, I am watching old video of the react js – D 11/6, 2017 at 18:1

You should update to the latest React library.

Some tutorials were updated to use React.render() instead of the deprecated React.renderComponent(), but the authors are still providing links to older versions or React, which do not have the newest render() method.

Wesley answered 7/6, 2015 at 22:10 Comment(0)

I'm not very familiar with React, but it looks like you should be using React.renderComponent instead of React.render

By running your code generated by rails-react locally on my browser and playing with the React object, it looks like the render method does not exist. Instead, React contains a renderComponent method:

enter image description here

If you change the code to use React.renderComponent instead of React.render, the component gets rendered on the DOM.

You can see it working here: http://jsfiddle.net/popksfb0/

Germicide answered 29/10, 2014 at 10:47 Comment(1)

renderComponent was just depreciated in the latest version, should be using React.render facebook.github.io/react/blog/2014/10/28/… – Ultimately 29/10, 2014 at 18:43

After 0.13.x React moved React.renderComponent() to React.render().

It answered 28/9, 2015 at 11:43 Comment(0)

For reasons unknown to me I had to wrap mine in {}

So from:

import React from "react";
import render from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

To (Working):

import React from "react";
import {render} from "react-dom";
import Router from "./Router";

render(Router, document.getElementById ('app'));

Eldridge answered 9/6, 2016 at 21:56 Comment(2)

That is because you are importing just render from ReactDOM. If you import ReactDOM from "react-dom"; than you would have to use ReactDOM.render(Router, document.getElementById ('app')); Check developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… for more info. – Clupeoid 18/7, 2016 at 11:50

For those who are new to ES6, remember to use exactly the variable {render}. Because you export only the "render" item of the complete module. If you want to use a different name you can use -> import {render as customRenderer} from 'react-dom'; – Ebon 29/9, 2017 at 16:29

For beginners, the error (type/undefined is undefined) may also show up due to the placement of React.render code block.

It should be placed after creating the components, preferably at the bottom.

Rachal answered 9/7, 2015 at 11:8 Comment(0)

React.render was introduced in version 0.12 as documented here: https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html

To fix your issue upgrade to that version or higher. At time of writing the latest version is 0.13.3.

Gallinule answered 14/7, 2015 at 8:32 Comment(0)

Download the latest React Starter Kit -> https://facebook.github.io/react/downloads.html
Use react.js and react-dom.js files on the build folder.
Instead of using the "text/jsx" use "text/babel" instead, referencing this minified library -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js

Here's the full script referencing your initial code.

<style>
    .commentBox{
        color:red;
        font-size:16px;
        font-weight:bold
    }
</style>

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

<script type="text/babel">
    var CommentBox = React.createClass({
        render: function(){
            return (
              React.DOM.div({className: "commentBox"}, 
                "Hello, world! I am a CommentBox."
              )
            );
        }
    });

    ReactDOM.render(
        <CommentBox/>,
        document.getElementById('content')
    );
</script>

Lifesaver answered 18/12, 2015 at 18:56 Comment(0)

Recommended topics

Hot tags