react – Unexpected block statement surrounding arrow body

I have an array

const reportOptions = [
  {
    id: 1,
    title: 'Report',
  },
  {
    id: 2,
    title: 'Report 2',
  },
  {
    id: 3,
    title: 'Report 3',
  },
]

I try to create a new state like below

  const [isReportsDownloading, setIsReportsDownloading] = useState(
    reportOptions.map(opt => {
      return { ...opt, isDownloading: false }
    })
  )

It gives me this error

Unexpected block statement surrounding arrow body; parenthesize the returned value and move it immediately after the `=>`

How to fix?

>Solution :

I think the error mean this, although your original code seems valid already, maybe just a eslint error.

  const [isReportsDownloading, setIsReportsDownloading] = useState(
    reportOptions.map((opt) => ({ ...opt, isDownloading: false }))
  );