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>
);
};
Top comments (0)