1

I have a paragraph that is enclosed in artist.bio.summary. This variable contains all the details about an artist. This is fetched from somewhere else. I am printing this out inside a p tag.

My problem is there is a link inside this p tag within a a tag. The a tag is like this;

 <a href="https://www.abc.xyz/music/xxx">Read more </a>

The p tag just prints this out rather than giving me a link to click. What should I do to act accordingly?

I am calling this property as below:

<p>{artist.bio.summary}</p>


let artist = {
            bio: { summary: '' }
        };

I had set this artist.bio.summary as a string initially.

And an example string that i am getting is below:

"hello <a href="https://www.abc.xyz/music/xxx">Read more </a> there"

The above string is the content of the artist.bio.summary once i received it

HexaCrop
  • 3,863
  • 2
  • 23
  • 50
  • When you say "just prints this out", do you mean that the HTML is being escaped? i.e. if you view the source in the browser, it contains `<a href="https://www.abc.xyz/music/xxx">Read more </a>` ? – IMSoP Oct 18 '17 at 08:45
  • So within the summary text there are html markup with the a tag? – Per Svensson Oct 18 '17 at 08:45
  • https://stackoverflow.com/q/23616226/1427878, https://stackoverflow.com/q/27934238/1427878 – CBroe Oct 18 '17 at 08:46
  • how do you save the summary containing the link into `artist.bio.summary`? could you show your code? it would work if you save them as a JSX.Element.. Your problem seems to occurs because you save it as string.. – samAlvin Oct 18 '17 at 08:47
  • i saved it as string. – HexaCrop Oct 18 '17 at 08:51
  • I saved this string as a string on receival. So is there any way to set it other than string so that i could get an html element – HexaCrop Oct 18 '17 at 08:55

2 Answers2

3

This is a security issue and is not allowed by React (by default) so it's as expected to not evaluate the embedded html markup, but they have a workaround if you really want to. dangerouslySetInnerHTML

<p dangerouslySetInnerHTML={artist.bio.summary}></p>

But please read up on injection attacks so you understand the consequences before using this kind of dynamic evals. https://www.codeproject.com/Articles/134024/HTML-and-JavaScript-Injection

Per Svensson
  • 751
  • 6
  • 14
  • Then you must write what your problem is and give more examples. For example how the summary string looks like. My guess is that the summary string is something like this. "Read more Here". Then that is not valid html and you must wrap it in a div or something. '

    " + artist.bio.summary + ""}>

    ' This is a div inside the p tag whick is wrong but im sure you can play with this and get it to work.     – Per Svensson Oct 18 '17 at 08:55
  • is there any other work around other than dangerouslySetInnerHTML, since it is a security vulnerability – HexaCrop Oct 18 '17 at 08:59
  • 1
    Well its not the dangerouslySetInnerHTML that is the security issue here. The React team has created this dangerouslySetInnerHTML since dynamically evaluating user code (like creating DOM nodes from a string like were doing here) is dangerous. My suggestion is that you read on article i linked about injection attacks and then reflect on how you could store that summary better. Perhaps in a "bio.summaryText" and a "bio.readMoreUrl" and then create a p:tag and a a tag respectively. – Per Svensson Oct 18 '17 at 09:51
1

From you description it seems that artist.bio.summary contains the entire content i.e <a href="https://www.abc.xyz/music/xxx">Read more </a>. In that case what you need is dangerouslySetInnerHTML

<p dangerouslySetInnerHTML={{__html: artist.bio.summary}}/>

However I would suggest you to make modifications to your data such that you aren't actually passing the HTML to the React component but creating it using JSX yourself

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400