-1

I don't understand how to untangle the double arrow binding. My linter does not like this ES7+ magic.

    export default class Login extends Component {
     handleChange = (fieldName) => (evt) => {
        this.setState({
          [fieldName]: evt.target.value,
          errors: {...this.state.errors, [fieldName]: null}
        })
      }
  }
Josh Pittman
  • 5,021
  • 4
  • 26
  • 51
  • You should fix your linter then - what is the warning message? Btw, the arrow functions are ES6, only the object spread is beyond ES7. – Bergi May 10 '17 at 17:08
  • I would like to understand how to untangle this regardless of my linter. I know arrows are ES6 but initialising a method without binding it inside a react class is most definitely ES7+ magic. The warning is `Unexpected token = (null)`. I'm using standardjs. – Josh Pittman May 10 '17 at 17:11
  • That also looks like probably the body of a class property. The ES6 way would be to have that inside your constructor, or to make it a method and bind it separately. – loganfsmyth May 10 '17 at 17:11
  • There's no sign that it is a method. How should we guess? – Estus Flask May 10 '17 at 17:11
  • The added context of the class is irrelevant in this case. The question is only about rewriting the arrows with function statements. I didn't add it because I thought it would be misleading. @estus Would you like me to wrap the method in a class? – Josh Pittman May 10 '17 at 17:13
  • @JoshPittman Yes, definitely, what you've shown is nothing but a simple assignment. If the class field is what your linter does have problems with, you need to specify that. – Bergi May 10 '17 at 17:14
  • @Bergi I'm just asking if someone can help me rewrite the simple assignment without arrow functions. – Josh Pittman May 10 '17 at 17:16
  • 2
    *"The added context of the class is irrelevant in this case."* Not at all, it's exactly what the problem is. Class fields are experimental, arrow functions are not. – Felix Kling May 10 '17 at 17:24
  • Thank you @FelixKling. I understand now. – Josh Pittman May 10 '17 at 17:31

1 Answers1

2

There's nothing wrong with the arrow functions, Unexpected token = means that your linter doesn't like class fields. Just move the whole thing inside the constructor:

export default class Login extends Component {
  constructor() {
    super();
    this.handleChange = (fieldName) => (evt) => {
      this.setState({
        [fieldName]: evt.target.value,
        errors: {...this.state.errors, [fieldName]: null}
      });
    };
  }
}
Bergi
  • 513,640
  • 108
  • 821
  • 1,164