Convert string to real HTML in React.js

Question

I received information from an API which comes with HTML. What happens is, when I try to display the information in the code, it transforms the HTML in a string and doesn't read as real HTML.
I search a lot and all I saw was the method of dangerouslySetInnerHTML but I also saw some reviews and comments about it and I don't want to use it if exists another solution. Also, I tried to use Fragmant but not success.

Below is my render() code:

return (
  <div>
    {models.map(model => (
      <a href="/sofa">
        <div className="Parcelas" key={model.id}>
          <img
            src={"url" + model.image}
            className="ParcImage"
            alt="sofa"
          />
          <h1>Sofá {model.name}</h1>
          <h2>
            1,200<span>€</span>
          </h2>

          <p className="Features">{model.description}</p>

          <button className="Botao">
            <p className="MostraDepois">Ver Detalhes</p>
            <span>+</span>
          </button>
          <img src="../../img/points.svg" className="Decoration" alt="points" />
        </div>
      </a>
    ))}
  </div>
);

Here's an image showing:

Could you give us more information, like how you models object looks like or an example screenshot? — MaddEye
– MaddEye, Commented Jul 26, 2018 at 9:07
Did you find a safe solution for this? Some threads have suggested libraries but they don't mention anything about the safety. — Omar
– Omar, Commented Oct 9, 2019 at 5:55
I've used the solution below that Tholle talked about. Idk about security honestly @Omar — soalrib
– soalrib, Commented Oct 10, 2019 at 14:00

soalrib · Accepted Answer · 2018-08-13 15:52:50Z

9

If you have html in a string, you can use dangerouslySetInnerHTML to render it as html.

return (
  <div>
    {models.map(model => (
      <a href="/sofa">
        <div className="Parcelas" key={model.id}>
          <img
            src={"url" + model.image}
            className="ParcImage"
            alt="sofa"
          />
          <h1>Sofá {model.name}</h1>
          <h2>
            1,200<span>€</span>
          </h2>

          <p
            className="Features"
            dangerouslySetInnerHTML={{ __html: model.description }}
          />

          <button className="Botao">
            <p className="MostraDepois">Ver Detalhes</p>
            <span>+</span>
          </button>
          <img src="../../img/points.svg" className="Decoration" alt="points" />
        </div>
      </a>
    ))}
  </div>
);

edited Aug 13, 2018 at 15:52

soalrib

5993 gold badges9 silver badges32 bronze badges

answered Jul 26, 2018 at 9:53

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MaddEye · Accepted Answer · 2018-07-26 09:57:46Z

1

Check if the text you're trying to append to the node is no escaped like this:

model: {
  description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
}

Instead of this:

model: {
  description: '<h1>Hi there!</h1>'
}

if is escaped you should convert it from your server-side.

if you can't try something like this:

<p className="Features">{model.description.fromCharCode(183)}</p>

Another option is a combination of ReactHtmlParser and unescapingHtml:

import ReactHtmlParser from "react-html-parser";

let model = [
  {
    description: "<h1>Hello There</h1>"
  },
  {
    description: "&lt;h1&gt;Hello There&lt;/h1&gt;"
  }
];

function App() {
  function unescapeHTML(html) {
    var escapeEl = document.createElement("textarea");
    escapeEl.innerHTML = html;
    return escapeEl.textContent;
  }

  return (
    <div className="App">
      {model.map(des => {
        return ReactHtmlParser(unescapeHTML(des.description));
      })}
    </div>
  );
}

edited Jul 26, 2018 at 9:57

answered Jul 26, 2018 at 9:26

MaddEye

7515 silver badges18 bronze badges

2 Comments

soalrib Over a year ago

Thw HTML comes from the API response, how do I do that model: {}? Also, the fromCharCode(183) says error it's not a function

MaddEye Over a year ago

it's simply a view of your possible model json. I editet the answer with an runable example for a working solution

Collectives™ on Stack Overflow

Convert string to real HTML in React.js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related