Reactで\nが入った文字列を改行する方法

0. はじめに

タイトルの通り、Reactで\nが入った文字列を改行するのに一苦労したので、備忘録としてまとめます。

1. やりたいこと

以下のコード作成のようにpropsで渡した文字列を改行して表示したい

import React from 'react'
import Background from './Background/Background'

const About = () => {
  return (
		<div>
      <Background description='テスト1\nテスト2' />
    </div>
  )
}

export default About

そのままpropsで渡しても改行されないようなので、以下を参考に \n を <br /> に変換するロジックを入れてみた。

https://chaika.hatenablog.com/entry/2020/07/12/083000

import React from 'react'
const Background = props => {
  const { description } = props
  return (
    <div>
			{ 
				description.split(/(\n)/).map((item, index) => (
          <React.Fragment key={index}>
            {item.match(/\n/) ? <br /> : item}
          </React.Fragment>
        ))
			}
		</div>
)
}

出力結果として、以下となることを期待

テスト1
テスト2

2. 困ったこと

実際は以下のように、改行コードが残ったまま表示される

テスト1\nテスト2

3. 試したこと

3A. そもそも、propsで渡す前の改行付き文字列は改行されるのか

以下のように console.log('テスト1\nテスト2')　をしてみる→改行される

import React from 'react'
import Background from './Background/Background'

const About = () => {
  console.log('テスト1\nテスト2')
  return (
		<div>
      <Background description='テスト1\nテスト2' />
    </div>
  )
}

export default About

3B. propsする前に、同じ文字列&ロジックで改行するか確認する

以下のコードで改行されることを確認

const tmp1 = 'テスト1\nテスト2'
  console.log(tmp1)

  const tmp2 = tmp1.split(/(\n)/).map((item, index) => {
    return (
      <React.Fragment key={index}>
        { item.match(/\n/) ? <br /> : item }
      </React.Fragment>
    )
  })

  console.dir(tmp2)

参考
https://chaika.hatenablog.com/entry/2020/07/12/083000

考察
propsで値を渡す際になんらか課題がありそう

原因

Propsで値を渡す際に{ value }としていなかったため。

対処法

以下のように、propsで値を渡す際に{}を使う。
具体的には以下。

import React from 'react'
import Background from './Background/Background'

const About = () => {
  return (
		<div>
      <Background description={'テスト1\nテスト2'} />
    </div>
  )
}

export default About

参考
https://pretagteam.com/question/line-break-in-react