DapperArtisan DapperArtisan - 3 months ago 33
React JSX Question

reactjs Cannot read property 'keys' of undefined

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>

Answer

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