jsxでアポストロフィを使う【eslintreact/no-unescaped-entities】


問題

Reactのjsx内にアプストロフィを含む文字列を記述しようとしたらESLintのエラー(eslintreact/no-unescaped-entities)に引っかかった。

解決方法

文字列の'(アポストロフィ)の箇所を',‘,',’のどれかに変換する。

<Link href="/user/signUp" variant="body2">
    Don't have an account? Sign up           // エラー
    Don&apos;t have an account? Sign up     // OK
    Don&lsquo;t have an account? Sign up   // OK
    Don&#39;t have an account? Sign up     // OK
    Don&rsquo;t have an account? Sign up   //OK
</Link>