Line Break - React Prop

Question

I have a component <Ren1 text="Line1\nLine2\nLine3" /> ...

function Ren1({text}){
  return <p>{text}</p>;
}
export default Ren1

How do I add the line break from \n from when it comes from the database?

Needed output:

Line1
Line2
Line3

Thank you in advance for your help

Answer 1

You can do it without splitting the text value.

First, put curly braces around the text prop when you are passing it:

<Text text={"One \n Two \n Three"} />

Then use whiteSpace: "pre-line" style

<div style={{ whiteSpace: "pre-line" }}>{props.text}</div>

sandbox