配列のテキストを簡単に改行させる方法

タグを増やさず簡単に改行させる

配列に.join("\n")を付けるとデータの間に改行コードが含まれる

配列と join の動作

["A", "B", "C"].join("\n")

は内部的にこうなる👇

"A" + "\n" + "B" + "\n" + "C"

join使用例

   {
        title: "改行させたい",
        content: [
            "• テキスト",
            "• テキスト",
            "• テキスト"
        ].join("\n"),
    },

whitespace-pre-lineで改行コードを基準に改行させる

pre-line 複数スペースはまとめる 改行コードは反映 折り返しあり

 <section>
      <h2>{title}</h2>
    <div className="whitespace-pre-line">{content}</div>
    </section>

最後に

タグを増やさず簡単に改行実装できたと思います、まだまだ知らない便利な機能がたくさんありますね！