Menu
I am learning reactjs through a tutorial and ran into this error. That says "Cannot read property 'keys' of undefined" My code is very minimal so I assume that it has to do with the structure of the language. Does anyone know the problem and a possible solution?
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script> <title>ReactJs</title> </head> <body> <div id="app"></div> <script type="text/babel"> var HelloWorld = ReactDOM.createClass({ render: function() { return <div> <h1>Hello World</h1> <p>This is some text></p> </div> } }); ReactDOM.render( <HelloWorld />, document.getElementById('app')); </script> </body> </html> 
811
The "Cannot read property 'props' of undefined" error occurs when a class method is called without having the correct context bound to the this keyword. To solve the error, define the class method as an arrow function or use the bind method in the classes' constructor method.
What Causes TypeError: Cannot Read Property of Undefined. Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects.
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. Here is an example of how the error occurs.
Edit: oddly, after our comments above, I checked to see if it was indeed the babel core version, I am using this one in my fiddle:
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
The second I switch to your version above I get this:
Uncaught TypeError: Cannot read property 'keys' of undefined Use React.createClass not ReactDOM.createClass and wrap multiple lines of html in parenthesis like so:
Working Example: https://jsfiddle.net/69z2wepo/38998/
var Hello = React.createClass({ render: function() { return ( <div> <h1>Hello World</h1> <p>This is some text</p> </div> ) } }); ReactDOM.render( <Hello name="World" />, document.getElementById('container') ); Just to be clear, as the other answers are a bit convoluted. The problem was using "babel-core" instead of "babel-standalone". Just look up for a cdn for babel-standalone instead.
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js 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
