how to break lines on \n in the text when using <card>

[james_sep]

Hi,

I'm using <card> inside timeline component to display content.

Here is the 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>

The {item.text} comes with \n. How to break lines on \n in <Card> component to allow multiple lines to be displayed?

Thanks,
James

[cagatay.civici]

This is more like a React issue rather than a Babylon issue but one alternative is creating a list by parsing the \n characters and using map() to generate paragraph elements so you need to convert new lines to block level text elements like paragraphs.