react class method is not defined no-undef

Viewed 10448

I am new in react. My app was running properly, but after adding eslint(airbnb), my apps failed to compile.

export default class HelloWorldComponent extends React.Component {
  render() {
    return (
      <div>
        <div>{this.props.message}</div>
        <button onClick={this.props.helloWorldClick}>Hello 
        World</button>
      </div>
    )
  }
  helloWorldClick = () => {
    console.log('here') 
  }
}

Before adding { "parser": "babel-eslint" } on .eslintrc file, it was throwing the eslint error

"[eslint] Parsing error: Unexpected token =" --on the helloWorldClick arrow function line.

After adding parser, i don't have any elsint error. But got compiled error to run the app.

Failed to compile ./src/component/HelloWorldComponent.js Line 18: 'helloWorldClick' is not defined no-undef

Please let me know how can I solve this error.

3 Answers

I ran into this problem aswell. You can add the following to the top each component file to prevent the 'un-def' keywork error message and still use arrow functions without changing the es-lint settings.

/* eslint no-undef: 0 */ // --> OFF
Related