Syntax Query: Unexpected block statement surrounding arrow body [Solved]

help
1

Hi,

I have a question around good syntax. I am picking up React and functional programming in general, and am pretty new to both. Have started including ESLint to help improve my code. Have a block below…

class UsersList extends Component {
  getUsers() {
    return this.props.users.map((user) => { \\ ESLINT highlights this...
      return (
        <User
          key = {user._id}
          user = {user}
        />
      );
    });
  }

  render() {
    return (
      <div className="container">
        {this.getUsers()}
      </div>
    );
  }
}

ESLINT highlights the above and says ‘Unexpected block statement surrounding arrow body’, and links to http://eslint.org/docs/rules/arrow-body-style as an explanation.

I do not understand what it wants me to change. Can someone provide some clarification?

Thanks so much.

Tat

2

If you have a look at the page, it mentions:

“as-needed” enforces no braces where they can be omitted (default)

and then:

When the rule is set to “as-needed” the following patterns are considered problems:

/*eslint arrow-body-style: ["error", "as-needed"]*/
/*eslint-env es6*/

let foo = () => {
    return 0;
};

So, ESLINT wants you to just do this:

getUsers() {
    return this.props.users.map((user) => 
        <User
          key = {user._id}
          user = {user}
        />
    });
  }
3

It works as expected. Awesome. Thank you so much.

Tat