title: useContext hook update from child component
body: <p>I'm fairly new to hooks as well as useContext, I'm attempting to update onClick from a child component and keep running into the error 'setPokemonId' is not a function, or.. it just doesn't do anything at all.</p>
  <p>PokedexContext.js</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  const PokedexContext = React.createContext([{}, () =&gt; {}]);
  
  const PokedexProvider = (props) =&gt; {
    const [state, setState] = useState({});
    const [loading, setLoading] = useState(true);
    let [error, setError] = useState(false);
    let [pokemonId, setPokemonId] = useState(10); //807 max
  
    useEffect(() =&gt; {
      setLoading(true);
      setError(false);
      axios
        .get(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
        .then((res) =&gt; {
          setState(res.data, loading);
          setLoading(false);
        })
        .catch((err) =&gt; {
          setLoading(false);
          if (err.response) {
            // pokemon not found
            setError(&quot;Response&quot;);
          } else if (err.request) {
            // api error
            setError(&quot;Request&quot;);
          } else {
            // everything else
            setError(true);
          }
        });
    }, [pokemonId]);
  
    return (
      &lt;PokedexContext.Provider
        value={[
          state,
          setState,
          error,
          loading,
          setLoading,
          pokemonId,
          setPokemonId,
        ]}
      &gt;
        {props.children}
      &lt;/PokedexContext.Provider&gt;
    );
  };
  
  export { PokedexContext, PokedexProvider };
  </code></pre>
  <p>App.js</p>
  <pre><code>import React from &quot;react&quot;;
  import { PokedexProvider } from &quot;../../context/PokedexContext&quot;;
  import Pokedex from &quot;../Pokedex&quot;;
  
  const Landing = () =&gt; {
    return (
      &lt;PokedexProvider&gt;
        &lt;main className=&quot;container&quot;&gt;
          &lt;Pokedex /&gt;
        &lt;/main&gt;
      &lt;/PokedexProvider&gt;
    );
  };
  
  export default Landing;
  </code></pre>
  <p>Pokedex.js</p>
  <pre><code>import React, { useState, useContext } from &quot;react&quot;;
  import pokedex from &quot;../assets/pokedex.png&quot;;
  import PokedexScreen from &quot;./PokedexScreen&quot;;
  import errorHandling from &quot;../utils/errorHandling&quot;;
  import { PokedexContext } from &quot;../context/PokedexContext&quot;;
  import spinner from &quot;../assets/pika-load.gif&quot;;
  
  const Pokedex = () =&gt; {
    const [state, setState, error, loading, setPokemonId, pokemonId] = useContext(
      PokedexContext
    );
    const [power, setPower] = useState(false);
    const [shinyDisplay, setShinyDisplay] = useState(false);
  
    console.log(pokemonId);
  
    return (
      &lt;div
        alt=&quot;Pokedex&quot;
        data-testid=&quot;Pokedex&quot;
        className=&quot;pokedex&quot;
        style={{ backgroundImage: `url(${pokedex})` }}
      &gt;
        &lt;button className=&quot;pokedex--onButton&quot; onClick={() =&gt; setPower(!power)}&gt;
          {power ? &quot;Off&quot; : &quot;On&quot;}
        &lt;/button&gt;
  
        {error ? (
          &lt;div className=&quot;pokedex--screen__error&quot;&gt;{errorHandling(error)}&lt;/div&gt;
        ) : power ? (
          &lt;&gt;
            {loading ? (
              &lt;img
                className=&quot;pokedex--screen__load&quot;
                src={spinner}
                alt=&quot;Loading...&quot;
              /&gt;
            ) : (
              &quot;&quot;
            )}
  
            &lt;button
              className=&quot;pokedex--shinyButton&quot;
              onClick={() =&gt; setShinyDisplay(!shinyDisplay)}
            &gt;
              S
            &lt;/button&gt;
            &lt;span&gt;
              &lt;button
                className=&quot;pokedex--negativeButton&quot;
                onClick={() =&gt; setPokemonId(pokemonId - 1)}
              &gt;
                -
              &lt;/button&gt;
              &lt;button
                className=&quot;pokedex--positiveButton&quot;
                //  onClick={}
              &gt;
                +
              &lt;/button&gt;
            &lt;/span&gt;
    
          &lt;/&gt;
        ) : (
          &lt;div className=&quot;pokedex--screen__off&quot; /&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default Pokedex;
  </code></pre>
  <p>My goal here is to update the pokemonId when clicking the positive or negative buttons, and is what is currently causing the crashes.</p>