jsのstringObject内で改行し、html内で表示する方法

Question

Reactとmonaca,mobile backendを使ってスマホアプリを作成しています。

やりたいこと

mobile backendのデータストアからデータを取得し、それをスマホ上に表示したいのですが、
そのデータの間に改行が含まれています。
この改行が上手く表示されません。

【参考】データストア (Monaca) : 基本的な使い方 | ニフクラ mobile backend

試したこと

改行コード込みのデータをmobile backendのデータに追加します。
これをクラウドから取得し、consoleなどで表示した場合は上手く改行されて表示されます。

しかし、これをhtml内に組み込むと改行が無視されて表示されます。

実装

上記の公式ページに従ってデータを取得し、それを一度Reduxに入れています。

AlertDB.fetchAll()
       .then(function(results){
         var object = results[that.props.id]
         const content = object.get("content") // データを取得
         setDetailPageTitleAndContent(id, detailPageTitle, content) // reduxに入れる
       })
       .catch(function(err){
         console.log(err)
       })

Redux内を回ったデータをjsx内で表示しています。

<div>{this.props.alertList[id].content}</div>

dev tool上の表示

replace

試しにreplace()を使ってみました。

const content = object.get("content").replace(/\r?\n/g, "<br>")

すると今度は普通に<br>と表示されるようになりました。

解決方法がわかりません。
どなたかご存じの方がいらっしゃいましたらご教示願えませんでしょうか。
よろしくおねがいします。

Answer 1

maisumakun様の回答をヒントに解決しました。

今回のケースではただ単にReact改行コードを追記するだけではダメでした。
それはReduxから返ってきたデータがsplitを持っていなかったからです。

代わりにデータ取得時にsplitして配列のstateにし、
要素ごとにdivタグで分けて表示する方法でうまくいきました。

詳細は以下の記事にまとめたので、必要であればご覧ください。
APIからデータを取得し、改行を加えてRedux、Reactで表示する

Answer 2

React的に<br>タグを生成する必要があります。

React.jsで改行を<br />に変換する（Qiita）

Comments

[退会済みユーザー]

回答ありがとうございます。
試してみたのですが
this.props.alertList[id].content
に対してsplit()を実行すると
Cannot read property 'split' of null
というエラーが表示されてしまいます。