In a universal ReactJS, I am intentionally rendering different output based on whether the content is rendered by the browser or server to be able to create different controls accordingly. This is done using exenv, for example:
<section>
{ExecutionEnvironment.canUseDOM && (
<div class="my-super-js-control"></div>
)}
{!ExecutionEnvironment.canUseDOM && (
<span>Please enable JavaScript if you want the super JS control</span>
)}
</section>
This works well and the result is as expected, however I get a warning in the console:
Warning: Expected server HTML to contain a matching <div> in <section>.
From my understanding, after hydrating React seems to compare the output HTML string from the server with the one that would be generated on the client-side.
In most cases these would be identical, however in this case I intentionally want different output. What is the correct way to implement this?