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.