Igor N. Igor N. - 1 month ago 10
React JSX Question

React - this.props looks undefined

I'm going through a React tutorial. Here's the code that doesn't work when I add a property to a Greeter object

let Greeter=React.createClass({
render: ()=>{
let name=this.props.name;
return (<div>
<h1>Hello {name}!</h1>
</div>);
}
});



ReactDOM.render(
<Greeter name ="Your name"/>,
document.getElementById("app")
);


The doesn't render at all, when I'm using Firefox, here's what I get:


unreachable code after return statementbrowser.min.js:37:6409
TypeError: undefined has no properties

Answer

Two things:

  1. You don't need to use a lambda here.
  2. ES6 method implementations do not need a colon (:) after the method name unless you explicitly specify function() { afterwards.

Replace:

render: ()=>{

With:

render() {

Or if you're unable to use the shorthand function declarations:

render: function() {