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

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

Tags:

Reactjs

Eslint