CODEWITHSUNDEEP
javascriptreactjs
Reacting
Reacting

Reputation: 6123

Multiline text with React

I am working with react and I need to do a multiline text.

<p>{"You'll receive offers for up to one week, which you can review."}</p>

It should return

You'll receive offers for up to one week,

which you can review

I am using that pattern {"..."} due to JSLint rules and I like that.

So, what should I do to accomplish what I want?

Upvotes: 0

Views: 372

Answers (3)

nanobar
nanobar

Reputation: 66345

Using {..} for jslint is not a good reason, things inside {} are evaluated differently. For plain html just do:

<p>You'll receive offers for up to one week,<br />which you can review.</p>

Although forcing a line break like this is considered poor practice for any html without a really good reason (because on different screen widths, font sizes, resolutions, translations, the break is likely incorrect). It's better to limit the width of the container so it breaks where you want it to and at least it will break naturally if things change.

Upvotes: 2

Felix Kling
Felix Kling

Reputation: 816302

In HTML, line breaks are denoted by <br />. So you would want:

<p>
  {"You'll receive offers for up to one week,"}
  <br />
  {"which you can review."}
</p>

Upvotes: 1

Yox2l
Yox2l

Reputation: 48

You can use html br tag for the new line

<p>{"You'll receive offers for up to one week, <br/>which you can review."}</p>

Hope that this helpful.

Upvotes: 0

Related Questions