CODEWITHSUNDEEP
reactjseslint
palyxk
palyxk

Reputation: 351

React esLinter errors reported

I have code :

    render() {
    const self = this;
//error on this line        const options = self.props.options.map(function (option) {
     return (
       <option
      key={option[self.props.optionValue]}
      value={option[self.props.optionValue]}
    >
      {option[self.props.optionLabel]}
    </option>
  );
});
return (
  <DropDownSimpleStyled
    closeStatus={this.state.closeStatus}
    value={this.getValue}
    onChange={this.handleChange}
    onClick={this.changeCloseStatus}
  >
    {options}
  </DropDownSimpleStyled>);

}

I am getting errors:

message: 'Unexpected function expression. (prefer-arrow-callback)'

message: 'Missing function expression name. (func-names)'

source: 'eslint'

What does it mean ? How should i re-write code to be eslinter compliant ? Did i miss something ?

Upvotes: 0

Views: 83

Answers (1)

Thomas Sauvajon
Thomas Sauvajon

Reputation: 1700

Prefer the arrow notation : http://eslint.org/docs/rules/prefer-arrow-callback

const options = self.props.options.map(function (option) {
  [...]
});

Is replaced by :

const options = self.props.options.map((option) => {
  [...]
});

Or when handling a SINGLE statement (note the implicit return) :

const options = self.props.options.map(option => (
  <option
    key={option[self.props.optionValue]}
    value={option[self.props.optionValue]}
  >
    {option[self.props.optionLabel]}
  </option>
));

More in depth explanations about arrow function notation best practices : https://github.com/airbnb/javascript#arrow-functions

It will correct both problems, as arrow functions are always anonymous.

http://eslint.org/docs/rules/func-names requires you to name your functions, so instead of function(option) {} you would have to name it, such as function function mapOptions(option) {}, for exemple. Both notations (arrow function and named function) should be accepted, depending on your ruleset.

Upvotes: 1

Related Questions