When an error message containing line break code \n is returned from an API access, the line breaks were not reflected when the message was output as is. I thought that converting \n to <br> would solve the problem, but <br> was just output as a plain text string. As it took some time to resolve the issue, I am leaving a note for reference.

Issue

Line breaks are not reflected when outputting a message containing line break codes.

const Body = () => {
  const body =
    'Bulbasaur\nCharmander\nSquirtle\nPikachu';

  return (
    <div>
      {body}
    </div>
  );
};

Solution 1: Splitting a String with Line Breaks into Components

In this solution, we split the original string by line breaks and create a component with <br> tags added to each element. This allows us to properly display the string with line breaks reflected.

const Body = () => {
  const body =
    'Bulbasaur\nCharmander\nSquirtle\nPikachu';

  return (
    <div>
      <MultiLineBody body={body} />
    </div>
  );
};

const MultiLineBody = ({ body }: { body: string }) => {
  const texts = body.split('\n').map((item, index) => {
    return (
      <React.Fragment key={index}>
        {item}
        <br />
      </React.Fragment>
    );
  });
  return <div>{texts}</div>;
};

Solution 2: Using CSS to reflect line breaks

In this solution, we set the CSS property whiteSpace to pre-line to reflect the line break codes.

const Body = () => {
  const body =
    'Bulbasaur\nCharmander\nSquirtle\nPikachu';

  return (
    <div style={{ whiteSpace: 'pre-line' }}>
      {body}
    </div>
  );
};