<p dir="auto">Hi,</p>
<p dir="auto">I know the Context is flagged as an experimental feature hence why it is missing from the Top-Level API but I find myself having to pass context to a legacy-compatible component.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="ReactDOM.render(React.createElement(DialogComponent, {id: id, component: this.component, childProps: this.props}), document.getElementById(id));"><pre class="notranslate"><code class="notranslate">ReactDOM.render(React.createElement(DialogComponent, {id: id, component: this.component, childProps: this.props}), document.getElementById(id));
</code></pre></div>
<p dir="auto"><code class="notranslate">React.createElement()</code> does not allow for context setting and this is causing me to 'hack' a context in these cases by doing something like</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="componentWillMount: function() {
        this.context = this.props.context;
    },"><pre class="notranslate"><code class="notranslate">componentWillMount: function() {
        this.context = this.props.context;
    },
</code></pre></div>
<p dir="auto">in a mixin.</p>
<p dir="auto">Is it something that could be looked into?</p>
<p dir="auto">Thanks!!</p>
<p dir="auto">I happened to notice that React will throw <code class="notranslate">Hooks can only be called inside the body of a function component</code> if a sibling element calls <code class="notranslate">ReactDOMServer.renderToStaticMarkup</code>. I have a <a href="https://jsfiddle.net/er4kL3of/" rel="nofollow">fiddle</a> that shows this behavior (I think you need to manually open your console to see the error).</p>
<p dir="auto">If you wrap the sibling element in a component or even just assign it a variable, this issue does not occur.</p>
<p dir="auto">It's easy to get around and is a pretty specific bug, but why might this be happening?</p>