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' }