<h3 dir="auto">Website or app</h3>
<p dir="auto"><a href="https://github.com/abybaddi009/react-bug-report">https://github.com/abybaddi009/react-bug-report</a></p>
<h3 dir="auto">Repro steps</h3>
<p dir="auto">Steps to reproduce:</p>
<ol dir="auto">
<li>Install all dependencies</li>
<li>Run the project with <code class="notranslate">npm start</code></li>
<li>Navigate to <a href="http://localhost:3000/login" rel="nofollow">http://localhost:3000/login</a></li>
<li>Enter any number into <em>phone number</em> and click on <strong>GET OTP</strong>.</li>
<li>Enter any number into the text boxes and click on <strong>SIGN IN</strong>.</li>
<li>Allow access to location.</li>
<li>Check the Dev Tools for the error</li>
</ol>
<h3 dir="auto">How often does this bug happen?</h3>
<p dir="auto">Every time</p>
<h3 dir="auto">DevTools package (automated)</h3>
<p dir="auto">react-devtools-extensions</p>
<h3 dir="auto">DevTools version (automated)</h3>
<p dir="auto">4.24.3-46a98cff2</p>
<h3 dir="auto">Error message (automated)</h3>
<p dir="auto">Cannot add child "986" to parent "985" because parent node was not found in the Store.</p>
<h3 dir="auto">Error call stack (automated)</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="emit@moz-extension://33a37ecb-24c1-4ab5-9400-2d8a276f2472/build/main.js:24430:22
bridge_Bridge/this._wallUnlisten&lt;@moz-extension://33a37ecb-24c1-4ab5-9400-2d8a276f2472/build/main.js:24599:14
listener@moz-extension://33a37ecb-24c1-4ab5-9400-2d8a276f2472/build/main.js:54423:41"><pre lang="text" class="notranslate"><code class="notranslate">emit@moz-extension://33a37ecb-24c1-4ab5-9400-2d8a276f2472/build/main.js:24430:22
bridge_Bridge/this._wallUnlisten&lt;@moz-extension://33a37ecb-24c1-4ab5-9400-2d8a276f2472/build/main.js:24599:14
listener@moz-extension://33a37ecb-24c1-4ab5-9400-2d8a276f2472/build/main.js:54423:41
</code></pre></div>
<h3 dir="auto">Error component stack (automated)</h3>
<p dir="auto"><em>No response</em></p>
<h3 dir="auto">GitHub query string (automated)</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="https://api.github.com/search/issues?q=Cannot add child  to parent  because parent node was not found in the Store. in:title is:issue is:open is:public label:&quot;Component: Developer Tools&quot; repo:facebook/react"><pre lang="text" class="notranslate"><code class="notranslate">https://api.github.com/search/issues?q=Cannot add child  to parent  because parent node was not found in the Store. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react
</code></pre></div>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">feature</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">The current behavior requires end users to use <code class="notranslate">createContext</code> in the module scope. To my understanding, it's not currently possible to use a default value derived from the state of a component (a stateful Provider in my case).</p>
<p dir="auto">This <a href="https://stackoverflow.com/questions/51448291/how-to-create-a-generic-react-component-with-a-typed-context-provider" rel="nofollow">StackOverflow post</a> hits the issue right on IMO.</p>
<p dir="auto">I feel like this is the classic use case for replacing Redux, and it doesn't work out of the box with static types.</p>
<p dir="auto">I think it's quite telling that <code class="notranslate">react-redux</code> is doing something similar <a href="https://github.com/reduxjs/react-redux/pull/995/files#diff-0d7275a0771455b7118505dedef42772R3">here</a> in their PR to move to React 16 context. I would expect the default value to be <code class="notranslate">this.state</code> of the Provider component instead of <code class="notranslate">null</code>.</p>
<p dir="auto">My knowledge of React internals is naive, but I didn't see anyone else bringing up this issue.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto"><strong>What is the desired behavior?</strong></p>
<p dir="auto">Maybe a JSX API for context creation? I imagine it's not quite that simple.</p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">16.3+</p>