title: Simple state managment with contextAPI in NextJS
body: <p>I want to set up a simple global state so that the site owner can update some numeric values whenever he wants to. I created a Provider, added it into custom _app.js and into his admin.js where he can change the value via input and into aboutme.js in which the value should get displayed at the end.</p>
  <p>Here is my StateProvider.js:</p>
  <pre><code>import React, { useContext, createContext, useState } from 'react';
  
  export const AppContext = createContext();
  
  export const StateProvider = ({ children }) =&gt; {
    const [dvds, setDvds] = useState(Number);
  
    let sharedState = {
      dvds,
      setDvds,
    };
  
    return (
      &lt;AppContext.Provider value={sharedState}&gt;{children}&lt;/AppContext.Provider&gt;
    );
  };
  
  export function useAppContext() {
    return useContext(AppContext);
  }
  </code></pre>
  <p>which I imported into _app.js:</p>
  <pre><code>import '../styles/globals.scss';
  import { StateProvider } from '../lib/appCtx';
  
  function MyApp({ Component, pageProps }) {
  
      return (
        &lt;&gt;
          &lt;StateProvider&gt;
            &lt;Component {...pageProps} /&gt;
          &lt;/StateProvider&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default MyApp;
  </code></pre>
  <p>Here is the admin.js to set the value:</p>
  <pre><code>import React, { useEffect, useState, useContext, createContext } from 'react';
  import styles from '../styles/Admin.module.scss';
  import { AppContext } from '../lib/appCtx';
  
  export default function Admin() {
  
    const { dvds, setDvds } = useContext(AppContext);
    const updateState = () =&gt; createContext(AppContext);
  
    return (
      &lt;&gt;
          ...    
              &lt;div className={styles.card}&gt;
                &lt;div className={styles.title}&gt;Number of DVDs&lt;/div&gt;
                &lt;p className={styles.text}&gt;
                  {new Intl.NumberFormat('de-DE', {
                    minimumFractionDigits: 0,
                    maximumFractionDigits: 0,
                  }).format(dvds)}
                &lt;/p&gt;
                &lt;input
                  type='text'
                  onChange={(e) =&gt; setDvds(e.target.value)}
                  onKeyPress={updateState}
                /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          ...
      &lt;/&gt;
    );
  }
  
  </code></pre>
  <p>and last but not least the aboutme.js to display the value from context:</p>
  <pre><code>import Image from 'next/image';
  import styles from '../styles/Aboutme.module.scss';
  import { AppContext, useAppContext } from '../lib/appCtx';
  
  export default function AboutMe() {
  
  
    function thousands_separators(num) {
      var num_parts = num.toString().split('.');
      num_parts[0] = num_parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      return num_parts.join('.');
    }
  
    const dvds = AppContext.dvs;
  
    return (
      &lt;div&gt;
          ...
              &lt;div className={styles.col}&gt;
                &lt;p&gt;
                  &lt;span&gt;
                    {new Intl.NumberFormat('de-DE', {
                      minimumFractionDigits: 0,
                      maximumFractionDigits: 0,
                    }).format(useAppContext(dvds))}
                  &lt;/span&gt;
                  &lt;br /&gt; dvds in collection
                &lt;/p&gt;           
              &lt;/div&gt;
            &lt;/div&gt;
       ...
    );
  }
  
  </code></pre>
  <p>So I want to pass the typed number from admin.js over the Provider into the aboutme.js.
  Would anyone be so nice to explain me why it doesn`t work and helping me by providing the right source? Thank you guys!!</p>