Eslint Error - Unexpected block statement surrounding arrow body; move the returned value immediately after the =>

Question

I am getting the error Failed to Compile Unexpected block statement surrounding arrow body; move the returned value immediately after the =>

File:

{     this.state.items.map((item) => {        return (          <div key={item}>              <a href={item.mainContact.phoneHref + item.mainContact.phone}>                 <i className="fa fa-phone" />                 <strong>{item.mainContact.phone}</strong>               </a>           </div>         );     }) } 

Anyone who could help me understand the error that would be great.

Thank you

Update

My .eslintrc.json file:

{   "env": {     "browser": true,     "jest": true   },   "extends": ["airbnb"],   "parser": "babel-eslint",   "rules": {       "class-methods-use-this": 0,       "react/jsx-filename-extension": [           "error",           {             "extensions": [".js", ".jsx"]           }       ]   } } 

Here is my devDependencies from package.json

"devDependencies": {   "babel-eslint": "^9.0.0",   "babel-loader": "^8.0.2",   "eslint": "^5.6.1",   "eslint-config-airbnb": "^17.1.0",   "eslint-loader": "^2.1.1",   "eslint-plugin-import": "^2.14.0",   "eslint-plugin-jsx-a11y": "^6.1.1",   "eslint-plugin-react": "^7.11.1",   "json-loader": "^0.5.7",   "react-html-parser": "^2.0.2",   "react-transition-group": "^2.4.0",   "webpack-cli": "^3.1.1" }, 

Answer 1

If you use arrow functions you have two syntax options when returning values:

1. () => { return somethinng }
2. () => expression

In the second case you just write expression that is automatically returned. The eslint rule that is giving you the error is telling you that if you have just one expression you can remove the curly braces and return the expression directly like this:

{     this.state.items.map((item) => (          <div key={item}>              <a href={item.mainContact.phoneHref + item.mainContact.phone}>                 <i className="fa fa-phone" />                 <strong>{item.mainContact.phone}</strong>               </a>           </div>         )     ); } 

Answer 2

you're using airbnb eslint preset

that enforces that arrow functions do not use braces if you just return one object.

Change your code to this and it should compile

this.state.items.map((item) => (<div key={item}>      <a href={item.mainContact.phoneHref + item.mainContact.phone}>         <i className="fa fa-phone" />         <strong>{item.mainContact.phone}</strong>       </a>   </div>) ) 

See docs for that rule

See where is configured in the airbnb repo