title: Best way to use conditional for useContext in React?
body: <p>I have a <code>CommonChild</code> component that called in two components: <code>Parent1</code> and <code>Parent2</code>.</p>
  <p>Bold <code>Parent1</code> and <code>Parent2</code> are use different <code>AppContext</code>.</p>
  <p>Please look some simple code below:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useContext, createContext } from 'react'
  
  //Create two createContext of Parents
  const ContextParent1 = createContext();
  const ContextParent2 = createContext();
  
  //Create two providers of Parents
  const AppProviderParent1 = (props) =&gt; {
      const [state] = useState(&quot;This is AppProviderParent1&quot;)
      return (
          &lt;ContextParent1.Provider value={state}&gt;
              {props.children}
          &lt;/ContextParent1.Provider&gt;
      )
  }
  const AppProviderParent2 = (props) =&gt; {
      const [state] = useState(&quot;This is AppProviderParent2&quot;)
      return (
          &lt;ContextParent2.Provider value={state}&gt;
              {props.children}
          &lt;/ContextParent2.Provider&gt;
      )
  }
  
  //Two parents called CommonChild, but different AppProvider (created above)
  const Parent1 = (props) =&gt; {
      return (
          &lt;AppProviderParent1 {...props}&gt;
              &lt;CommonChild /&gt;
          &lt;/AppProviderParent1&gt;
      )
  }
  const Parent2 = (props) =&gt; {
      return (
          &lt;AppProviderParent2 {...props}&gt;
              &lt;CommonChild /&gt;
          &lt;/AppProviderParent2&gt;
      )
  }
  
  //CommonChild that try to use useContext to get value
  const CommonChild = () =&gt; {
      const context = useContext(...) //how to use useContext?
      return (
          &lt;p&gt;This is CommonChild Component&lt;/p&gt;
      )
  }
  </code></pre>
  <p>I don't know how to use <code>useContext</code> in <code>CommonChild</code> which sensibly.</p>
  <p>Thank you for your help</p>