how to break lines on \n in Card

[james_sep]

Hi,

I have Card to display text. In the text string, there are \n as line breaker. But <Card> does not break lines on \n.

Here is my code:

<Card /* title={item.status} subTitle={item.date} */>
{item.image && <img src={`assets/demo/images/product/${item.image}`} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/u ... holder.png')} alt={item.name} width={200} className="shadow-2 mb-3" />}
<p>
{item.text}
</p>
<p>
{item.status}
</p>
</Card>

I want {item.text} to break on \n in the text. How can I do that?

Thanks,
James

[Melloware]

You might need to replace `\n` with `<br>` the HTML breaking space?

[james_sep]

I tried replacing with <br /> , but it doesn't help.

[Melloware]

you have to use dangerouslySetInnerHTML so it translates the breaks?

Code: Select all

<p dangerouslySetInnerHTML={{ __html: item.text }}></p>

[james_sep]

Amazing!
Thank you!