Overview

アロー関数でオブジェクトを返す際は、()でラップする必要があります。

() => ( { key: value } )

() => { key: value } // これはダメ

ここからはすべて蛇足ですが、経緯を書きます。

通常のアロー関数は、() => { return }という構文です。

const func = () => {
  // 処理
  return 
}

ただし単行のアロー関数は、{}とreturn句を使わずとも値を返すことができます。

const sum = (a, b) => a + b

console.log(sum(1, 2)) // 3

JSのオブジェクトは{}で囲って表します。

{ key: value }

オブジェクトを返したい場合は、以下のように書けば・・・あれ？

const func = () => { key: 'value' }

console.log(func()) // undefined

{}がオブジェクトではなく、処理をラップするものとして解釈されてしまうのですね。

ということで、()でラップする必要があるのでした。

const func = () => ( { key: 'value' } )

console.log(func()) // { key: 'value' }