Is it possible to use arrow functions in classes with ES6?

Question

My question is very simple. If I have a class in ES6 is it possible to use an arrow function within it?

import React, { Component } from 'react';

export default class SearchForm extends Component {

  state = {
    searchText: ''
  }

  onSearchChange = e => {
    this.setState({ searchText: e.target.value });
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.onSearch(this.query.value);
    e.currentTarget.reset();
  }

  render() {
    return (
      <form className="search-form" onSubmit={this.handleSubmit} >
        <label className="is-hidden" htmlFor="search">Search</label>
        <input type="search"
               onChange={this.onSearchChange}
               name="search"
               ref={(input) => this.query = input}
               placeholder="Search..." />
        <button type="submit" id="submit" className="search-button">
          <i className="material-icons icn-search">search</i>
        </button>
      </form>
    );
  }
}

The reason I ask is that I get an error in my console, even when using Babel. It seems like there's a lot of resources on the internet stating you can do this (most of which are about developing with React).

Is this something that Babel should do, and will eventually become natively supported?

The error I get is an unexpected = sign, just before the parens.

EDIT: I forgot to mention, the reason I wish to do this is to make use of the this keyword in context of the class. If I use a regular function - to my understanding - I would have to bind this to the function. I'm trying to look for a nicer way of doing that.

Answer 1

In order to do that, you'll need to add the transform-class-properties babel plugin, which allows you to have auto-bound class methods like you are attempting.

Unlike what others have just suggested, there IS value in doing this. Namely, your class function automatically has the class this bound to it, without having to manually bind it in your constructor.

Without the transform-class-properties plugin, you could do:

export default class SearchForm extends Component {

  constructor(props) {
    super(props)
    this.doSomething = this.doSomething.bind(this)
  }

  doSomething () {
    console.log(this) // <-- 'this' is the class instance
  }
}

With the plugin:

export default class SearchForm extends Component {

  doSomething = () => {
    console.log(this) // <-- 'this' is the class instance, no binding necessary
  }
}

Heres and article that explains it (among other thing) fairly well and consisely: https://medium.com/@joshblack/writing-a-react-component-in-es2015-a0b27e1ed50a

Answer 2

Yes it is possible to use arrow functions inside ES6 classes. I noticed that you are not calling super inside your constructor you have to do that if you are extending and overriding the constructor.

Other than that your code compiles correctly to ES5, checkout this link to the online Babel transpiler that contains your sample code.

Checkout this question similar to yours.

Answer 3

Yes, it is possible. Your code should work, you need to check you Babel setup, there must be something wrong with how it's configured.

In your example, doSomething is actually a property of the class; the type of the property is a function. Here's an example that additionally shows a method, as well as a use of the this keyword:

class SearchForm {

  doSomething = () => {
    console.log('I am a property')
  }

  doSomethingElse() {
    console.log('I am a method')
  }

  doBoth() {
    this.doSomething();
    this.doSomethingElse()
  }
}

const form = new SearchForm();
form.doBoth();

You can check it out live here.