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.