-1

I doing a little project and I want to display some text, which I get as HTTP response, in some textfield. The text I am getting is html, but when I am trying to display it, it's not formatting the text, but showing the plain text with tags. Please see attached screenshot for reference.

I am using react.js on the front-end. Not sure if there are special rules I missed.

I have tried wrapping the response in a div, textarea and article tag. Nothing was successful.

Please help!

This is my component:

const Show = (props) => (
  <div className='content'>
    <a href={props.job.url}><span className='ListEntryTitle'>{props.job.title} 
    </span></a>
    <p className='ListEntryCompany' style={{margin: "0 0 0 0"}}> 
    {props.job.company}</p>
    <p className='ListEntryType'>{props.job.type}</p> 
    <article className="box" type="text/html" style={{width: "auto", height: 
    "350px", overflow: "auto"}}>{props.job.description}</article>
    <button className="button" onClick={props.saveJob}>Save</button>
    <button className="button" onClick={props.nextJob}>Next</button>
    <div>
      <button className="button" onClick={props.newSearch}>new Search</button>
    </div>
  </div>
)

Screenshot

Laurents Mohr
  • 68
  • 1
  • 1
  • 6

1 Answers1

0

If your html is coming as string from server side then you can try what i have done below.It will be good if you could have given the fiddle link so that everyone can help you.

<article className="box" style={{width: "auto", height: "350px", overflow: "auto"}} dangerouslySetInnerHTML={{ __html: props.job.description }}></article>

piyush bageria
  • 61
  • 3