Functional Componentで'missing display name'エラー

2020-01-21

ReactのFunctional Componentで、引数を適用して関数を返したい場合がある。

この際、関数内部で関数を定義することになるが、この内部の関数を無名関数にするとESLintでエラーが出る。

const createIcon = (name: string) => {
    return (props => <i {...props} class={name}>)
}

Component definition is missing display name react/display-name

デバッグのために、全てのコンポーネントに名前を付けることが推奨されるため。上だとcreateIconの返り値が無名コンポーネントになるので怒られる。

関数名をつければよい。

const createIcon = (name: string) => {
    return (
        function icon(props) {
            return <i {...props} class={name}>
        }
    )
}

もしくは

const createIcon = (name: string) => {
    const icon = (props) =>  <i {...props} class={name}>
    return icon
}

それか、debuggableにする価値もないような部分なら抑制すればよい。

const createIcon = (name: string) => {
    // eslint-disable-next-line react/display-name
    return (props => <i {...props} class={name}>)
}

missing display nameと言われているが、displayNameを指定する必要はない。（が、指定を推奨されている）