CODEWITHSUNDEEP
reactjsstringreact-props
jipay
jipay

Reputation: 93

Add line breaks (<br />) in string props?

I'm creating a website in React. I have some text props and I would like to insert line breaks (br) or a li ... But I can't do it.

an example : extract of my component :

<article className="vertebra">
    <section className="vertebra-content container">
         <div className="flexitem">
             <h2 className="h2-like">{props.title}</h2>
             <p>{props.text}</p>
         </div> 
     </section>
</article>

of my app :

<MainVertebra
    title="blablabla"
    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

How do I make line breaks or a list in props.text ?

Upvotes: 0

Views: 707

Answers (1)

wangdev87
wangdev87

Reputation: 8751

Use dangerouslySetInnerHTML.

You can include any tags such as <br/>, <li/> in the props.text as a string.

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

Upvotes: 1

Related Questions