javascript - i want to insert <br /> tag in this map()

Question

I am studying React JS, but I have some difficulties so I am writing a question.

Here is my code.

const ServiceList = [{
    icon: '01',
    title: 'TEST',
    description: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered.',
}, {
    icon: '02',
    title: 'TEST',
    description: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered.',
}, {
    icon: '03',
    title: 'TEST',
    description: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered.',
}, ]

{
  ServiceList.map((val , i) =>
    (                        
      <div className="col-lg-4 col-md-6 col-sm-6 col-12" key={i}>                           
        <p>{val.description}</p>
      </div>
    )
  )
}

In this code, I want to display val.description like this

<p>
  There are many variations of passages of Lorem Ipsum available,
  <br />
  but the majority have suffered.
</p>

I've tried several methods (like , , etc..) so that the content of the description is a line break like the <br /> tag, but it didn't work.

Please tell me another try options.

Very Thanks.

Answer 1

You should change your array, and display a description as a tag. In this case, you can put <br /> inside of the text.

Example

{
    icon: '03',
    title: 'TEST',
    description: <>{'There are many variations of'} <br /> {'passages of Lorem Ipsum available, but the majority have suffered.'}</>,
}