CODEWITHSUNDEEP
reactjseslint
roshambo
roshambo

Reputation: 2804

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

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"
},

Upvotes: 46

Views: 102802

Answers (8)

Divakar R
Divakar R

Reputation: 845

I had this issue when i was returning a json directly using map

const Containers = Sales.results.map((value) => {
    return { date: value[0], sale: value[1] };
});

I had to change the way i returned my json , I used an variable to hold on to results and then return the variable which solved the issue here is later fix code:

const Containers = Sales.results.map((value) => {
    const finalTrends = { date: value[0], sale: value[1] };
    return finalTrends;
  });

Upvotes: 0

thinkerBOB
thinkerBOB

Reputation: 176

Babel Extension

If you have Babel installed in your extension then uninstallation of this extension will resolve the error.

Upvotes: 0

yagnik
yagnik

Reputation: 1

You can write this:

const myFunction = (func) => {
  return (req, res, next) => {
    func(req, res, next).catch(next);
  };
};

As this:

const myFunction = (func) => (req, res, next) =>
  func(req, res, next).catch(next);

Upvotes: 0

Simeon Stoykov
Simeon Stoykov

Reputation: 981

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

  1. () => { return something }
  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>
        )
    );
}

Upvotes: 73

Rounak
Rounak

Reputation: 95

Add the below code :

"arrow-body-style": "off"

Upvotes: 6

Rizwan
Rizwan

Reputation: 4463

Simply remove your return() function and put whole block into function like this

{
    this.state.items.map((item) => (
         <div key={item}>DATA</div>
    )
}

Here is examples how it work:

() => { return <div key={item}>DATA</div>}

so after remove our return function it will work like that

() => (<div key={item}>DATA</div>)

or

() => yourState

Upvotes: 9

akwasiijunior
akwasiijunior

Reputation: 185

The rule is saying that you can remove the curly braces along with the "return" surrounding the that you're returning. However, returning a if statement would require the curly braces.

This is the correct solution to your question based on the lint error:

{
    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>
        )
    );
}

The curly braces would however be needed if you were returning multiple expressions. Here's a example using a if statement:

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

Upvotes: 2

Gonzalo.-
Gonzalo.-

Reputation: 12682

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

Upvotes: 5

Related Questions