CODEWITHSUNDEEP
reactjseslint
user1250264
user1250264

Reputation: 905

React JS esLint error Unexpected block statement surrounding arrow body; move the returned value immediately after the =>

In my react jsx file, I have the following code inside a Table

render() {
  return(

  <Table>
  <thead>
    <tr>
    {
      this.collection.arraylist.map((name) => {
        return this.getMoreNames(name)
      }
    }
    </tr>
  </thead>
  <Table>
)}



esLint is give me the error as described in my post subject. I read other post and added () but that did not work

  this.collection.arraylist.map((name) => ({
        return this.getMoreNames(name)
   })

I tried removing the parenthesis around name, error is still there. The code works but I not sure how to resolve this lint error.

Upvotes: 1

Views: 303

Answers (1)

aw04
aw04

Reputation: 11187

The wording of the error is a bit confusing in my option, but it's telling you the block is unnecessary in the case of a single return statement. Your code can be rewritten as:

this.collection.arraylist.map(name => this.getMoreNames(name))

See the documentation for a thorough explanation of how arrow functions work.

Upvotes: 2

Related Questions