CODEWITHSUNDEEP
javascriptcssreactjsdangerouslysetinnerhtml
enjee
enjee

Reputation: 1

React - dangerouslySetInnerHTML being displayed as plain text

I've created a React app that displays job postings. When I click on a job post in the list, that particular job post's details are displayed.

I'm trying to display the body of the job post in the same way that it has been formatted at the source. To do that, I've tried using the following code:

<div id="apply-now" className="apply-section">
    <h3>How to apply.</h3>
    <div dangerouslySetInnerHTML={{ __html: currentJob.description }}></div>
</div>

However, when the component is rendered, the content is not formatted and is displayed in plain text without the appropriate formatting.

Here's an example that hasn't been formatted:

example

The word __"Application"__ should be in bold, the website link should be an actual link, as should "Click here for an application form" link.

The data I'm getting back from the API call is the same as above:

Join us! - We are looking forward to your application via the "Application" form Your contact: Ralph Ullmann Telefon: 089/ 5511 333783 https://www.consorsfinanz.de/karrier Click here for the application form!"

^^ Even above on StackOverflow it works! But I can't get it to work in my app!

I've been tearing my hair out for hours trying to fix this and I can't even understand why it doesn't work.

Upvotes: 0

Views: 1939

Answers (1)

Andrew
Andrew

Reputation: 7545

This sounds like an algorithm challenge. Sorry thought it could be done in an elegant way, but regex would be the better option

  1. Use regex to match anything inbetween two underscores
  2. In each match, replace remove the underscores and wrap each element in strong tags

  const mdBoldToStrong = (text) => {
const surroundingUnderscores = new RegExp(/__(.*?)__/g)
return text
  .replace(surroundingUnderscores, (word) => {
    return `<strong>${word.replace(/__/g, '')}</strong>`
  })
  }

console.log(mdBoldToStrong('__Application__'))
console.log(mdBoldToStrong('Text__Application__Text__'))
console.log(mdBoldToStrong('__Text____Application__Text'))

Please let me know if you need any clarification.

Upvotes: 1

Related Questions