Using degrees symbols in React and JSX

Question

I'm coding out a temperature app with React and I'm on the part where I'm displaying the different temperatures within the element.

Now I'm trying to do °F to return Fahrenheit, but then it occurred to me: this is JSX, not HTML. Sure enough, when you put this into a component, it returns an error because the DOM is trying to read JavaScript.

Is there a good workaround for this?

Answer 1

You can use HTML entities within literal text in JSX.

function App() {
  return <h1>&deg;F</h1>;
}

You can use the unicode number corresponding to the entity if you need it inside a string.

function App() {
  return <h1>{'\u00b0'}</h1>;
}

A few other ways of approaching it are listed in the JSX Gotchas part of the documentation.

Answer 2

Usually I just type the actual symbol. In your case: ºF