React text prop linebreak

Question

So I have a prop called data which takes a string as an argument, for example

<MyComp 
  data="Some text, some other text"
/>

How can I add a line break after Some text, let's say? would a simple escaped /n tag work( I mean, is it best practice? )

Answer 1

Just use curly braces when passing props and add \n:

    <MyComp 
      data={"Some text,\nsome other text"}
    />

and add css property to element white-space: pre-wrap;

Answer 2

It totally depends on how you are going to use your data prop. Escaped Characters (\n) will not work in JSX. In this case, I would suggest splitting the lines over multiple props or passing an Array with multiple lines.

However, if you are going to use it for an input element like a textarea, you can use Escaped Characters just fine.