CODEWITHSUNDEEP
reactjs
user7246161
user7246161

Reputation: 267

How to render a <br /> embedded in a string as a newline in JSX?

x = I love <br /> sports. In the UI I want sports to be rendered in a new line.

I am using a react JSX component to achieve this.

I have tried to strip the starting single quotes and the ending single quotes as well.

I don't want to use dangerouslySetInnerHTML.

let x = 'I love <br /> sports' 
let y = I love <br /> sports 
render() {

    return (
       <div>
         {x}  ---- Renders as a string with no line breaks.
       </div>

       <div>
         {y}  ---------- Renders sports in a new line.
       </div>

   );

}

Upvotes: 0

Views: 394

Answers (1)

Engineer
Engineer

Reputation: 1261

Using dangerouslySetInnerHTML you can display HTML tags in JSX. This is working solution of above question.

class App extends React.Component{
 render(){
  let x = 'I love <br /> sports'; 
// let y = I love <br /> sports ;
  return(
    <div>
    <div dangerouslySetInnerHTML={{
    __html: x
      }} />
</div>
  )
 }
}
ReactDOM.render(<App /> ,document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

Upvotes: 2

Related Questions