【React】wpのcontentが出力されない

reactに最近をハマっています。
自分のサイトがwpなので、wp情報をwp rest apiから取って来てreactを使って表示する作業をしていた時に問題が。

wp rest apiはJSON情報

JSONの情報をaxiosで取ってきてそのまま出力する感じの流れなのです。
タイトルやカテゴリ、画像、contentの部分もそのまま取れます。

取ってきたJSONの中身(ざっくり)

     

{
"id": 1255,
"date": "2022-10-08T20:30:03",
"title": {
"rendered": "タイトルが入ります"
},
"content": {
"rendered":"<p>テキスト</p>"
}
}
    

左側の””の中身を指定して出力する感じになります。

コンテンツの出力

    {posts.map((post, index) => (
　{post.content.rendered}
))}
    

ただこのまま出すと、タグが変換されず<p>テキスト</p>のようにhtmlが生のまま表示されてしまって、困ったことにページが構築されないんですね。そんな時の対応があったので覚書。

dangerouslySetInnerHTML

dangerouslySetInnerHTMLを使うと、取ってきたタグ情報をhtmlに変換して出力してくれます。
使いすぎると脆弱性の元になりますので、雰囲気見て使おうと思います。

使い方

    
{posts.map((post, index) => (
    <div dangerouslySetInnerHTML={{__html: post.content.rendered}}></div>
))}
    

まとめ

無事出力完了しました、これで個ページは完成！
学び始めは慣れるまでは難しいですねー！
ちなみにvue.jsでは v-htmlを使うと同じことができるみたいです。