Sometimes, we want to fix the HTML special character (& symbol) not rendering issue in a React component.
In this article, we’ll look at how to fix the HTML special character (& symbol) not rendering issue in a React component.
How to fix the HTML special character (& symbol) not rendering issue in a React component?
To fix the HTML special character (& symbol) not rendering issue in a React component, we can use the dangerouslySetInnerHTML prop.
For instance, we write:
import React from "react";
export default function App() {
return (
<>
<div dangerouslySetInnerHTML={{ __html: "&" }}></div>
</>
);
}
to set dangerouslySetInnerHTML to an object with the __html property set to a string with the '&' character set.
Therefore, we should see ‘&’ rendered.
Conclusion
To fix the HTML special character (& symbol) not rendering issue in a React component, we can use the dangerouslySetInnerHTML prop.
