0

I receive text from the server like this "Neo-Luddism.<p>Like they are going to stop China or any other country outside US or EU.<p>The most they can hope to do, is to force some companies to move off-shore.<p>Wonder where was all this people when Elon Musk started releasing betas on FSD.<p>Self-appointed &#x27;Center for AI and Digital Policy&#x27;, nothing more to add". In this form, it is displayed.I insert it into JSX as a variable (data.text).

const Text = () => {
  return (
  <div className={styles.text}>{data.text}</div>
)}

how to make it display normal characters instead &#х27;?

I couldn't find anything that could help

Mpak921102
  • 3
  • 2

1 Answers1

1

Your content looks like html, try: dangerouslySetInnerHTML.

    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>
  );
}

No CodeSandbox: https://codesandbox.io/s/sweet-lewin-dwqr0

Ref.: https://pt.stackoverflow.com/questions/434520/innerhtml-no-react

Warley Silva
  • 26
  • 3