Why cant we print a variable with html names included in it?

Question

I am trying to learn ReactJS.

I have a html selections option as
<option value="navigate">Navigate to &lt;URL&gt; </option>

and I have obtained the selected text in my script

let type = document.getElementById ('stepType').options[document.getElementById('stepType').selectedIndex].text;

when i console.log(type) i am getting "Navigate to <URL>"

but when i try to update my div's inner html, all that is getting printed is "Navigate to "

Thanks for putting up with my stupid question, but I would really like to know what is happening underneath, since i know let type = "Navigate to <URL>" would work.

Answer 1

to avoid XXS attach React will render text. If you want to render html use

<div dangerouslySetInnerHTML={{__html: "Navigate to &lt;URL&gt;"}}/>