Вывести состояние как HTML

По умолчанию, состояния экранируются для избежания XSS атак.

Например, есть код ниже:

const [square, setSquare] = useState("12<sup>2</sup>");
  
return (
  <div>Площадь: {square}</div>
);

В итоге будет сгенерирована строка:

Площадь: 12<sup>2</sup>

Чтобы состояние выводилась как HTML, используется атрибут dangerouslySetInnerHTML.

const [square, setSquare] = useState("12<sup>2</sup>");
  
return (
  <div dangerouslySetInnerHTML={{ __html: square }} />
);

Теперь строка будет выведена как HTML.