CODEWITHSUNDEEP
reactjsreact-native
J.Doo
J.Doo

Reputation: 57

React text prop linebreak

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? )

Upvotes: 2

Views: 6164

Answers (5)

Bluorenge
Bluorenge

Reputation: 144

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;

Upvotes: 5

huzaifa sarfaraz
huzaifa sarfaraz

Reputation: 1

if you want break lines in props you can wrap it in react fragment it will work.

<GlobalB
        description={<> <span>Our email management solution is both robust.</span><br/><br/><span>Our platform also enables you to revoke </span></>}
      />

enter image description here

Upvotes: 0

Treycos
Treycos

Reputation: 7492

If your objective is to render your text directly, \n will not work.

You can for example, add a <br/> tag at the end of your rendering function :

const MyComp = ({ data }) => <p>{data}<br/></p>

And if it is optional, you can add a boolean prop :

<MyComp 
  data="Some text, some other text"
  break={true}
/>

const MyComp = ({ data, break }) => <p>{data}{break && <br/>}</p>

Another method could be to use nested components, for more flexibility :

<MyComp>
    <p>
        Some text, some other text<br/>
    </p>
</MyComp>

const MyComp = ({ clidren }) => children

But if you simply want to send this text somwehere else, adding \n is alright.

Upvotes: 0

Chris
Chris

Reputation: 6631

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.

Upvotes: 3

Charlie
Charlie

Reputation: 276

You could always have the text be a child prop of your component.

<MyComp>
  <div>
    <p>Here I'd like one line</p>
    <p>Here I'd like another line</p>
  </div>
</MyComp>

Then in MyComp you can just display it with {props.children}

Upvotes: 2

Related Questions