title: TypeError: Cannot read properties of undefined (reading 'createContext')
body: <p>Hey all im looking for help. im having some trouble with passing data from one child component to another child component using the context api. But i get this typeError instead, i tried a few searches so far without much luck. if anyone can't point me in the right direction it would be much appreciated!</p>
  <p>thanks</p>
  <p><a href="https://i.stack.imgur.com/HFsQf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HFsQf.png" alt="enter image description here" /></a>
  <strong>CurrencyProvider.js</strong></p>
  <pre><code>import { React, Component} from 'react';
  
  export const MContext = React.createContext('');
  
  class CurrencyProvider extends Component {
  
  constructor() {
      super()
      this.state = {
          setinputValue: (value) =&gt; this.setState({ inputValue: value })
      }
  }
  
  render() {
      return (
          &lt;MContext.Provider value={this.state}&gt;
              {this.props.children}
          &lt;/MContext.Provider&gt;)
  }
  }
  export default CurrencyProvider;
  </code></pre>
  <p><strong>Dropdown.js</strong></p>
  <pre><code>import { useQuery, gql } from &quot;@apollo/client&quot;;
  import { useState } from &quot;react&quot;;
  import './Dropdown.scss';
  import { MContext } from &quot;../CurrencyProvider&quot;;
  
    const EXCHANGE_RATES = gql`
     query GetExchangeRates {
     rates(currency: &quot;AUD&quot;) {
     currency
     rate
     name
    }
    }
   `;
  
    function Dropdown() {
  
  const [isToggled, setToggle] = useState(false);
  
  const { data, loading, error } = useQuery(EXCHANGE_RATES);
  
  if (loading) {
      return &lt;div&gt;loading&lt;/div&gt;;
  }
  
  if (error) {
      return &lt;div&gt;{error}&lt;/div&gt;;
  }
  
  return (
      &lt;div className=&quot;custom-dropdown&quot;&gt; 
          &lt;ul className={`dropdown-menu ${isToggled ? 'open':''}`}&gt; 
              &lt;li value=&quot;0&quot; className=&quot;first-item&quot; onClick={() =&gt; setToggle(!isToggled)} onKeyPress={() =&gt; setToggle(!isToggled)} tabIndex=&quot;0&quot;&gt;Select Currency:&lt;/li&gt;
              {data.rates.map(({ currency, rate, name },index) =&gt; (
                &lt;MContext.Consumer&gt;
                  {(context) =&gt; (
                    &lt;li className=&quot;list-item&quot; key={index} data={rate} tabIndex=&quot;0&quot; onClick={()=&gt;{context.setinputValue(rate)}}&gt; &lt;span&gt;{name}: {currency}&lt;/span&gt;&lt;/li&gt;
                  )}
                &lt;/MContext.Consumer&gt;
              ))}
          &lt;/ul&gt;
      &lt;/div&gt;
  );
  }
  
  export default Dropdown;
  </code></pre>
  <p><strong>Input.js</strong></p>
  <pre><code>import './Input.scss';
  import { MContext } from &quot;../CurrencyProvider&quot;;
  
  function Input() {
      return(
          &lt;MContext.Consumer&gt;
              {(context) =&gt; (
                  &lt;input value={context.state.inputValue} /&gt;
              )}
          &lt;/MContext.Consumer&gt;
      );
  }
  
  export default Input;
  </code></pre>
  <p><strong>CurrencyContainer.js</strong></p>
  <pre><code>import Dropdown from '../Dropdown/Dropdown';
  import Input from '../Input/Input';
  import './CurrencyContainer.scss';
  import CurrencyProvider from '../CurrencyProvider';
  
  function CurrencyContainer() {
      return (
          &lt;div className='currency-container'&gt;
              &lt;h1 &gt;Select Items&lt;/h1&gt;
              &lt;div className=&quot;currency-wrapper&quot;&gt;
                  &lt;CurrencyProvider&gt;
                      &lt;div&gt;&lt;Input /&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;Dropdown /&gt;&lt;/div&gt;
                      &lt;div&gt;&lt;Dropdown /&gt;&lt;/div&gt;
                  &lt;/CurrencyProvider&gt;
              &lt;/div&gt; 
          &lt;/div&gt;
      );
  }
  
  export default CurrencyContainer;
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import logo from './logo.svg';
  import './App.scss';
  import { client } from &quot;./ApolloClient/client&quot;;
  import { ApolloProvider } from '@apollo/client';
  import CurrencyContainer from './CurrencyContainer/CurrencyContainer';
  
  
  function App() {
    return (
      &lt;ApolloProvider client={client}&gt;
      &lt;div className=&quot;App&quot;&gt;
        &lt;img src={logo} className=&quot;App-logo&quot; alt=&quot;logo&quot; /&gt;
        &lt;CurrencyContainer /&gt; 
      &lt;/div&gt;
      &lt;/ApolloProvider&gt;
    );
  }
  
  export default App;
  </code></pre>