CODEWITHSUNDEEP
javascriptreactjsreact-rails
Laurie Young
Laurie Young

Reputation: 138414

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

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?

Upvotes: 33

Views: 55280

Answers (8)

Jamie Hutber
Jamie Hutber

Reputation: 28074

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'));

Upvotes: 2

Kent Aguilar
Kent Aguilar

Reputation: 5338

  1. Download the latest React Starter Kit -> https://facebook.github.io/react/downloads.html
  2. Use react.js and react-dom.js files on the build folder.
  3. 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>

Upvotes: 1

IVN
IVN

Reputation: 1347

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.

Upvotes: 67

Rajesh Hegde
Rajesh Hegde

Reputation: 2822

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

Upvotes: 2

rjbultitude
rjbultitude

Reputation: 935

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.

Upvotes: 1

Jorge.Methew
Jorge.Methew

Reputation: 85

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.

Upvotes: 1

Sebasti&#225;n Grignoli
Sebasti&#225;n Grignoli

Reputation: 33432

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.

Upvotes: 15

jsanchez
jsanchez

Reputation: 325

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/

Upvotes: 4

Related Questions