0

I need to display styled text inside div. When doing it hard coded it works, but when using the variable value the style tags are not taking affect.

I tried this way but it didn't help:

<div contentEditable={true} dangerouslySetInnerHTML={{ __html: element.Display }} 
                             style={{ width: '100%', backgroundColor: "lightgray" }}>
                            {/*{element.Display}*/}
                            {/*numOf(from(SHOPDB.DB2ADMIN.CLIENT), SHOPDB.DB2ADMIN.CLIENT.<span style={{backgroundColor: '#FFFF00'}}>LAST_NAME</span> = SHOPDB.DB2ADMIN.CLIENT.LAST_NAME) = 1*/}
                        </div>

References:

Display edited/styled text - react

Rendering raw html with reactjs

M_Z
  • 191
  • 1
  • 2
  • 12
  • can you give an example of what value `element.Display` variable will hold? – Hemanath Mar 10 '20 at 07:45
  • its inside... in a comment! numOf(from(SHOPDB.DB2ADMIN.CLIENT)..... – M_Z Mar 10 '20 at 07:45
  • If I understand correctly, you're wanting the styling `{ width: '100%', backgroundColor: "lightgray" }` to apply to the `
    ` that encloses the html content returned by `DOMPurify.sanitize(element.Display)` ?
     – Dacre Denny Mar 10 '20 at 07:48
  • yes, that's the case – M_Z Mar 10 '20 at 07:49
  • Does this achieve what you require? https://codesandbox.io/s/happy-heisenberg-ngz59 – Dacre Denny Mar 10 '20 at 07:52
  • Yes, I forked your sandbox and used my html and I can see that it's not taking affect! so the problem is with the styled span that I'm using! cause bold is working: https://codesandbox.io/s/quirky-cannon-bpyww – M_Z Mar 10 '20 at 07:56
  • I managed this way: LAST_NAME, I was using the style of react first with {{}}. Thanks a lot – M_Z Mar 10 '20 at 08:06
  • @M_Z, Are you trying to achieve like this?? https://codesandbox.io/s/festive-firefly-9klel – Maniraj Murugan Mar 10 '20 at 09:39

0 Answers0