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

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
james_sep
Posts: 4
Joined: 19 Apr 2023, 15:29

01 Jun 2023, 17:50

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
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

05 Sep 2023, 20:21

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.

Post Reply

Return to “Babylon - PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest