Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
4.6k views
in Technique[技术] by (71.8m points)

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

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.'}</>,
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...