innerHTML at React

Question

Good morning. I’m getting a reply received by a API in my application React, however, such a response is a array containing string’s with elements html:

0
"<p>This Emmy winning series is a comic look at the assorted humiliations and rare triumphs of a group of girls in their 20s.</p>"
1
"<p><b>Good Girls</b> follows three \"good girl\" suburban wives and mothers who suddenly find themselves in desperate circumstances and decide to stop playing it safe, and risk everything to take their power back.</p>"
2
"<p>The city of Townsville may be a beautiful, bustling metropolis, but don't be fooled! There's evil afoot! And only three things can keep the bad guys at bay: Blossom, Bubbles and Buttercup, three super-powered little girls, known to their fans (and villains everywhere) as <b>The Powerpuff Girls</b>. Juggling school, bedtimes, and beating up giant monsters may be daunting, but together the Powerpuff Girls are up to the task. Battling a who's who of evil, they show what it really means to \"fight..."
3
"<p>Imagine a night in with four girls. Now imagine doing that for four years. In a building full of girls that is a Girl's Hostel. Live the Dushmani, the Dosti, the Pyaar, the Bhasad.</p>"

If I use the method map to write such texts on my screen, the elements will also appear, so I thought to use the wanted innerHTML, but I’m on JSX. What I have to do to solve this?

NOTE: I have tried using the dangerouslySetInnerHTML but it didn’t work.

Answer 1

You can install a library, but what it will do is facilitate the use of dangerouslySetInnerHTML

React-Inner-html

npm i -S react-inner-html

Example:

import html from 'react-inner-html';

function MyComponent() {
  return <div {...html('my <b>hot</b> html')} />;
}

If you want to use "dangerouslySetInnerHTML", here is an example for you to take a look at

https://codepen.io/jamesnimlos/pen/VKAaJO

Here is the component:

class Dynamic extends React.Component {
    markup (val) {
        return { __html: val }
    }

    render () {
        return <div dangerouslySetInnerHTML={this.markup(this.props.html)} />;
    }

    componentDidMount () {
        const node = document.querySelectorAll('#edit-me')[0];
        setTimeout(() => {
            node.innerHTML = `<span style="color:red;">This has been changed</span>`;
            this.props.updated();
        }, 2000);
    }
}

Answer 2

How are you using the dangerouslySetInnerHTML? There is a specific syntax to pass this prop. Look at this example:

import React from "react";
import "./styles.css";

const list = [
  '<p>This Emmy winning series is a comic look at the assorted humiliations and rare triumphs of a group of girls in their 20s.</p>',
  '<p><b>Good Girls</b> follows three "good girl" suburban wives and mothers who suddenly find themselves in desperate circumstances and decide to stop playing it safe, and risk everything to take their power back.</p>'
];

const getItems = () => new Promise((resolve) => setTimeout(() => resolve(list), 1000));

export default function App() {
  const [items, setItems] = React.useState([]);

  React.useEffect(() => {
    getItems().then((result) => setItems(result));
  }, []);

  if (!items.length) {
    return 'Loading...';
  }

  return (
    <div className="App">
      <ul>
        {items.map((item) => (
          <li dangerouslySetInnerHTML={{ __html: item }} />
        ))}
      </ul>
    </div>
  );
}

In the Codesandbox: https://codesandbox.io/s/sweet-lewin-dwqr0