How to use arrow functions inside React.createClass

Question

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({
    componentDidMount: () => {
        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()
        }
    },
    componentDidMount: 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')
);

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

Thanks in advance.

Possible duplicate of [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](http://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch) — Felix Kling, Mar 18 '16 at 13:28
You cannot simply replace normal functions with arrow functions. — Felix Kling, Mar 18 '16 at 13:29

Oleksandr T. · Accepted Answer · 2016-03-18T09:44:24.330

You can change your code with ES2015 like this

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

  componentDidMount() {
    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

score 1 · Answer 2 · answered Mar 18 '16 at 09:28

1

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.

answered Mar 18 '16 at 09:28

Hareesh

694
6
18

Thanks, i have just marked right answer, but yours seems to be good as well. – Rantiev Mar 18 '16 at 09:38

How to use arrow functions inside React.createClass

2 Answers2