How can I make new line string of Props used in react?

useraQkl1 0
Viewed 23

I'm having trouble with new line breaks in strings.

parent

<SampleComponent title="One \n Two \n Three">

children

type SampleComponentProps = {
  title: string;
};

export const SampleComponent: FC<SampleComponentProps> = ({
  title,
}) => {

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

display

One \n Two \n Three

I would expect

One
Two
Three
jsx reactjs
2 Answers

The following code should work

return ({title.split("\\n").map((line, index) => (
    <React.Fragment key={index}>
      {line}
      <br />
    </React.Fragment>
  ))})
user1uPL0

You can solve this problem by setting HTML directly from React, just using html and css, no using JS regex, or convert string to array then output.

<div
  style={{whiteSpace: 'pre'}}
  dangerouslySetInnerHTML={{ __html: ' One \n Two \n Three' }}
></div>

this is the result

enter image description here

Reference link: dangerously set innerHTML

userrOLX0
Related