I'm fetching data from an API, and one of properties of the data is a description of the item, but the JSON response is written in HTML, and has <a></a> tags and other html elements in it. I would like to NOT display the tags and have them actually work.
for example, this is what its output to the screen:
"Here is the <a href='https://www.google.com'> Link </a>"
This is what it should look like:
"Here is the Link "
How can I achieve this?
(I'm using Next.js)
and this is how I'm displaying the data
<p>{description}</p>
Try below. dangerouslySetInnerHTML is the JSX property you need.
<p dangerouslySetInnerHTML={{ __html: description }}></p>
Check the docs for more info
Working example
function App() {
const description = "Here is the <a href='https://www.google.com'> Link </a>";
return (
<p dangerouslySetInnerHTML={{ __html: description }}></p>
);
};
ReactDOM.render(
<App />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>