0

I am using typescript.

i have and object called Reason as below. i have defined all the variables in the object as string. (value, display, dataType and label as string)

    Reason = {
            value: '<ul><li>list item 1</li><li>list item 2</li></ul>',
            display: '<ul><li>list item 1</li><li>list item 2</li></ul>', 
            dataType: 'string', 
            label: 'Reason'}

I want to display this in a div or span tag.

    <div> {Reason.value} </div>

it is not getting displayed as

  • list item 1
  • list item 2
rather it prints it as string as <ul><li>list item 1</li><li>list item 2</li></ul>

please let me know how to parse this text to display it in list elements instead of text.

Sisir
  • 33
  • 1
  • 5

1 Answers1

1

When you do {Reason.value} it assumes Reason.value is text so it escapes all the HTML characters you are using.

To accomplish what you want you'll need to manually set the HTML.

In react you do this with dangerouslySetInnerHtml - this can leave you vulnerable to XSS attacks.

<div dangerouslySetInnerHTML={{ __html: Reason.value }}></div>

RobPethi
  • 551
  • 9
  • 27
  • But is there any other way to do it without using this attribute (dangerouslySetInnerHTML) – Sisir Sep 13 '18 at 14:29
  • Check out this question on SO with the answers you need https://stackoverflow.com/questions/29044518/safe-alternative-to-dangerouslysetinnerhtml – RobPethi Sep 13 '18 at 15:13