Checksum is invalid because of © entity

[jameslnewell]

I'm using React to render on the server and on the client. On the client I'm getting this error message:

Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <div data-reactid="
 (server) <div data-reactid="

Besides the checksum being present in the server rendered HTML, the rendered HTML is exactly the same on both the client and server.

There is a visual issue with © rendering as © (but this is still rendered the same on both the server and the client).

The React doco says HTML entities in literal text should work fine. Removing the HTML entity © makes the checksum error message go away.

render() {
  return <footer>&copy; 2015</footer>;
}

Am I doing something wrong or is this a bug?

I'm using react 0.14.2 rendered on express viewed in chrome.

[zpao]

I can only reproduce this if I don't set the charset of the document to utf-8 (unfortunately w3schools page is actually decent here - http://www.w3schools.com/html/html_charset.asp). Can you still reproduce if you've done that?

[jameslnewell]

Doh! Thanks, that was it.

So JSX is converting the entity to the unicode character?

[jameslnewell]

Should have kept reading the methods for displaying entities dynamically... it was right there. Sorry! 😞