Menu
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?
725
Another possible solution would be to set the variable $ to noConflict, overriding WordPress' initial scripts like in the example below. var $ = jQuery. noConflict(); $(document). ready(function(){ // jQuery code });
The React. js "Uncaught TypeError: X is not a function" occurs when we try to call a value that is not a function as a function, e.g. calling the props object instead of a function. To solve the error, console. log the value you are calling and make sure it is a function.
This is a common JavaScript error that happens when you try to call a function before it is defined. You get this error when you try to execute a function that is uninitialized or improperly initialized . It means that the expression did not return a function object.
A variable that has not been assigned a value is of type undefined . A method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. A function returns undefined if a value was not returned .
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.
78
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
