I have a text with html and css and need formatted text - html

Question

I am re-making a website that takes tests. It was on PHP and now we are taking it to TypeScript.
I am using React and Material UI to display the feedback for the correct answer and explanation when the user sends their answer.
I get the feedback from an old database they were using (and that we will still use), and what they used to do was create a variable called html (string), and then concatenate each part of the html code raw.
Something like this: (in PHP .= and . is what you use to concatenate)
$html = '';
$html = '<div>';
$html .= '<p class="maintext"><span>' . $some_variable_they_want_in_span . '</span>';
$html .= $some_other_variable_that_is_empty_or_not_depending_on_if_clause . '</p>';
$html .= '</div>';
it is a pain... but the thing is. Now that I am showing the feedback, it comes in a terrible format that I can't simply show in a Typography element (Material UI, but I couldn't in a -p- tag either).
The text is, for example, this one:
" <p>Artículo séptimo.\n</p><p>1. En el ejercicio de sus funciones, los miembros de las Fuerzas y Cuerpos de Seguridad tendrán a todos los efectos legales el carácter de AGENTES DE LA AUTORIDAD.\n</p><p>2. Cuando se cometa delito de atentado, empleando en su ejecución armas de fuego, explosivos u otros medios de agresión de análoga peligrosidad, que puedan poner en peligro grave la integridad física de los miembros de las Fuerzas y Cuerpos de Seguridad, tendrán al efecto de su protección penal LA CONSIDERACIÓN DE AUTORIDAD.\n</p><p>3. La Guardia Civil sólo tendrá consideración de fuerza armada en el cumplimiento de las misiones de carácter militar que se le encomienden, de acuerdo CON EL ORDENAMIENTO JURÍDICO.\n</p><p>\n</p> "
How can I show this in a readable and nice text? I tried some npm packages and passing it through decodeURI but no change. Any ideas? Some text will even come with something like
"Artículo 2. Secretaría de Estado de Seguridad.<div>Corresponde a la persona titular de la Secretaría de Estado de Seguridad el ejercicio de las funciones a las que se refiere el artículo 62 de la Ley 40/2015, de 1 de octubre, y en particular, la dirección, coordinación y supervisión de los órganos directivos dependientes de la Secretaría de Estado, bajo la inmediata autoridad de la persona titular del Ministerio, para el ejercicio de las siguientes funciones:&nbsp;</div><ul><li><span style=\"letter-spacing: -0.015rem;\">El ejercicio del mando de las Fuerzas y Cuerpos de Seguridad DEL ESTADO, y la COORDINACIÓN Y SUPERVISIÓN DE LOS SERVICIOS Y MISIONES QUE LES CORRESPONDEN.</span></li></ul>"

Answer 1

Ok! So one of my coworkers found this solution:
import textParserTest from "~/utils/textparser"; // (which uses in its code the following: import parse from "html-react-parser";)
...
<div
contentEditable="true"
dangerouslySetInnerHTML={{
__html: textParserTest(props.question.answer, 0)
.toString()
.replaceAll("\\n", ""),
}}
></div>
So basically. html-react-parser package did the trick