ReactJs not rendering anchor tag as a link when anchor tag comes inside the string response

Issue

I am new to react js and shifting our code from Freemarker to react I am getting a Json string response which contains anchor tags, when I render this string in react js on browser it shows the anchor tag as a plain text not as a link.

Response:

{
    "type": "paragraph",
    "paragraph": {
        "body": " <p> <a href=\"http://stg-testing.com/new-cars/jaguar\" target=\"_blank\">Jaguar</a> <a href=\"http://stg-testing.com/new-cars/landrover\" target=\"_blank\">Land Rover</a> has officially taken the covers off the fifth generation Range Rover SUV which now comes with a new look, new engine options and loaded with new technology with features galore. </p>"
    }
}

ReactJS Code:

<div className="StoryBodyContent" id={`story_$${storyData.id}`}>
   {storyData.listElement.map(element => 
     (
       <p>{element.paragraph.body.replace("<p>","").replace("</p>","")}</p>
     ))
    }
</div>

ReactJS Output:

Expected Output:

Solution

Try setting the innerHTML instead of rendering this as a string.

<p dangerouslySetInnerHTML={
  element.paragraph.body.replace("<p>","").replace("</p>","")
}></p>

Read the documentation for more details.

Answered By - Randy