Categories
React Answers

How to fix the ESLint Error ‘Unexpected block statement surrounding arrow body; move the returned value immediately after the =>’ with React?

Spread the love

To fix the ESLint Error ‘Unexpected block statement surrounding arrow body; move the returned value immediately after the =>’ with React, we use parentheses for the arrow function body if all we do is return a value.

For instance, we write

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

to call map with a function that returns a div.

We surround the div with parentheses so we return the div implicitly.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *