1

I am writing my first React app by following a tutorial.

I included Babel which I expected to transpile JSX and ES6 features. In my component when I use fat arrow syntax for render function. props doesn't render but when everything is fine use the old function style.

What is the problem?

Here is my code:

With Fat arrow Syntax

var Greeter = React.createClass({
  render : ()=>{
    var name =this.props.name;
    return(
      <div>
        <h1>Hello {name} !</h1>
        <p>This is form the component !!</p>
      </div>
    );
  }
});
ReactDOM.render(
 <Greeter name="Henry"/>,
  document.getElementById('app')
);
//nothing renders in browser

Without fat arrow syntax:

var Greeter = React.createClass({
  render : function(){
    var name =this.props.name;
    return(
      <div>
        <h1>Hello {name} !</h1>
        <p>This is form the component !!</p>
      </div>
    );
  }
});
ReactDOM.render(
 <Greeter name="Henry"/>,
  document.getElementById('app')
);


//Every thing renders well in browser

Babel settings

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
</head>

<body>

  <div id="app"></div>
  <script type="text/babel" src="app.jsx"></script>
</body>

</html>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
henrybbosa
  • 1,139
  • 13
  • 28
  • The arrow function always references the current `this` object no mater what. If you define you callback function like that the global scope will be bound to you callback as the `this` object. In order to work properly you need to bind another object (your react scope) to the function. Since the this reference can not be changed (via bind or call method) you will never be able to access the `this.props.name` properties. – Bellian Jul 31 '17 at 08:34
  • Thanks alot @Bellian – henrybbosa Jul 31 '17 at 08:39

0 Answers0