Reactで絵文字のUNICODEがそのまま表示される

Question

実現したいこと

Reactでタグ内にUNICODEを書いて絵文字を表示したい

該当のソースコード

const Component = () => {
  const emojiString = "こんにちは😀今日はいい天気ですね😄"
  return (
    <div>{emojiString}</div>
  )
}

試したこと

タグ内にテキストを直接入れると絵文字が正しく表示される

<div>こんにちは&#x1f600;今日はいい天気ですね&#x1f604;</div>

絵文字のUNICODEを含んだ文字列を生成して返す関数を用いて、関数の返り値を変数に代入して表示するという作業をしているのでタグ内に直接テキストを書き込むことができないため、文字列の変数が絵文字のUNICODEを含む場合でもその変数をタグ内で指定して絵文字を正しく出力す方法をご存じの方がいましたら教えていただきたいです。

Answer 1

String.fromCodePointで文字列に変換しましょう。

const emojiString = `こんにちは${String.fromCodePoint(parseInt('😀'.slice(3), 16))}`

Comments

[InC_kayu]

解決しました！回答ありがとうございます🙇‍♂️