I want to use ES6 (ES2015) as much as possible for my small project. Now I want to use arrow functions with React.

// What I want
let Text = React.createClass({
    ponentDidMount: () => {
        setInterval(this.updateCurrentTime, 1000);
    }
}

// What I have
let Paragraph = React.createClass({
    render: () => (<div className="MySuperTable"><Text name="Dodo" startDate={(new Date()).toString()} /></div>)
});

let Text = React.createClass({
    getInitialState: function () {
        return {
            currentTime: (new Date()).toString()
        }
    },
    ponentDidMount: function () {
        setInterval(this.updateCurrentTime, 1000);
    },
    updateCurrentTime: function () {
        this.setState({
            currentTime: (new Date()).toString()
        });
    },
    render: function () {
        return (
            <div>
                <span>Hello my name is {this.props.name}</span>
                <span>And I was born on {this.props.startDate}</span>
                <span>And I now it's {this.state.currentTime}</span>
            </div>
        );
    }
});

ReactDOM.render(
    <Paragraph/>,
    document.getElementById('container')
);

1. What do I have to do to get this working?
2. As I understand this will be the object passed into createClass itself, is this correct?
3. How do I bind it to the Text instance?

Thanks in advance.

I want to use ES6 (ES2015) as much as possible for my small project. Now I want to use arrow functions with React.

// What I want
let Text = React.createClass({
    ponentDidMount: () => {
        setInterval(this.updateCurrentTime, 1000);
    }
}

// What I have
let Paragraph = React.createClass({
    render: () => (<div className="MySuperTable"><Text name="Dodo" startDate={(new Date()).toString()} /></div>)
});

let Text = React.createClass({
    getInitialState: function () {
        return {
            currentTime: (new Date()).toString()
        }
    },
    ponentDidMount: function () {
        setInterval(this.updateCurrentTime, 1000);
    },
    updateCurrentTime: function () {
        this.setState({
            currentTime: (new Date()).toString()
        });
    },
    render: function () {
        return (
            <div>
                <span>Hello my name is {this.props.name}</span>
                <span>And I was born on {this.props.startDate}</span>
                <span>And I now it's {this.state.currentTime}</span>
            </div>
        );
    }
});

ReactDOM.render(
    <Paragraph/>,
    document.getElementById('container')
);

1. What do I have to do to get this working?
2. As I understand this will be the object passed into createClass itself, is this correct?
3. How do I bind it to the Text instance?

Thanks in advance.

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited May 25, 2017 at 20:48 icc97 12.9k99 gold badges8383 silver badges9797 bronze badges asked Mar 18, 2016 at 9:13 RantievRantiev 2,26333 gold badges3838 silver badges6060 bronze badges 2

• Possible duplicate of Arrow function vs function declaration / expressions: Are they equivalent / exchangeable? – Felix Kling Commented Mar 18, 2016 at 13:28
• You cannot simply replace normal functions with arrow functions. – Felix Kling Commented Mar 18, 2016 at 13:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can change your code with ES2015 like this

class Text extends React.Component {
  constructor() {
    super();
    this.state = { currentTime: (new Date()).toString() };
  }

  ponentDidMount() {
    setInterval(() => this.updateCurrentTime(), 1000);
  }

  updateCurrentTime() {
    this.setState({
      currentTime: (new Date()).toString()
    });
  }

  render() {
    return <div>
      <span>Hello my name is { this.props.name }</span>
      <span>And i was born { this.props.startDate }</span>
      <span>And i now it's { this.state.currentTime }</span>
    </div>  
  }
};

let Paragraph = () => {
  return <div className="MySuperTable">
    <Text name="Dodo" startDate={ (new Date()).toString() } />
  </div>
};

Example

React - Reusable Components

As you said, you wanted use ES6 as much as possible. So then instead of using createClass, you can use 'React.Component', you can find more info here.

And then to use, arrow mark you can use Babel, preset-2015.