Reactで改行を含む文字列をBRタグに置換する方法

TL; DR

Array.prototype.map() のindexを活用すれば、条件分岐できることに気付きました。

内容

ReactのJSX内では改行文字をUI上の改行として表示できません。
また、単なる文字列置換だけでは、 <br /> をDOMとして認識せず、単なる文字列として表示してしまいます。

対処方法として、様々な手法が考えられているようです。

個人的には、for文を使う手法がシンプルで良さそうなのですが、やはり最後に <br /> が残ってしまうのが気になります。

最後にbrタグが残ってしまう手法

export const MultiLines = props => {
  const { text } = props;
  const lines = text.split(/\r?\n/);

  return (
    <>
      {lines.map((line: string, index: number) => (
        <React.Fragment key={index}>
          {line}<br />
        </React.Fragment>
      ))}
    </>
  );
};

提案する対処方法

Array.prototype.map() におけるindexを活用し、最後以外の要素を描画する際にのみ <br /> を表示すればいいと考えました。

提案する手法

export const MultiLines = props => {
  const { text } = props;
  const lines = text.split(/\r?\n/);

  return (
    <>
      {lines.map((line: string, index: number) => (
        <React.Fragment key={index}>
          {line}
          {index + 1 !== lines.length && <br />}
        </React.Fragment>
      ))}
    </>
  );
};

See the Pen Split text at newline character and convert to BR tag by Morichan (@Morichan-the-sasster) on CodePen.