title: Context - dispatch is not a function (React)
body: <p>Very new to context and reducers in React. I am currently trying to use Context to get a date string from an event on a Line Graph. The line graph I'm using is from react-chartjs-2.</p>
  <p>My context is setup and provided as below:</p>
  <pre><code>export const Context = createContext();
  
  const initialState = {
    isShowCarousel: false,
    date: null,
    coin: null
  };
  const reducer = (state, action) =&gt; {
    switch (action.type) {
      case &quot;GRAPH_CLICKED&quot;:
        return {
          ...state,
          isShowCarousel: true,
          date: action.payload.date,
          coin: action.payload.coin
        };
      default:
        return state;
    }
  };
  
  export default function LandingPage(props) {
    const classes = useStyles();
    const [state, dispatch] = useReducer(reducer, initialState);
  </code></pre>
  <p>The provider is then setup like this:</p>
  <pre><code> &lt;div className={classNames(classes.main, classes.mainRaised)}&gt;
        &lt;Context.Provider
            value={{
              state,
              dispatch
            }}
          &gt;
            &lt;SectionCryptoPrices /&gt;
            &lt;NewsCarousel date={state.date} coin={state.coin} /&gt;
            &lt;/Context.Provider&gt;
          &lt;/div&gt;   
  </code></pre>
  <p>My line graph component then imports the Context via the following:</p>
  <pre><code>import React, { useContext } from 'react';
  import {Line} from 'react-chartjs-2';
  import { Context } from &quot;views/CryptoMashup/LandingPage&quot;;
  
  function LineGraph (props) {
    const dispatch = useContext(Context);
    let coin = props.coin;
    
    const state = {
        labels: props.rowData.labels,
        datasets: [
          {
            label: 'Price movement for ' + props.coin,
            fill: true,
            lineTension: 0.1,
            backgroundColor: 'rgba(75,192,192,1)',
            borderColor: 'rgba(0,0,0,1)',
            borderWidth: 2,
            data: props.rowData.prices
          }
        ]
      }
      
      return (
      // line graph
      &lt;div className=&quot;line-graph&quot;&gt;
          &lt;Line
          data={state}
          options={{
              legend:{
              display:true,
              position:'bottom'
              },
              onClick: function(evt, element) {
                if(element.length &gt; 0) {
                  let ind = element[0]._index;
                  let date = element[0]._xScale.ticks[ind];
                  let payload = {
                    date,
                    coin
                  }
                  dispatch({
                    type: &quot;GRAPH_CLICKED&quot;,
                    payload: payload
                  })
                }
              }
          }}
          /&gt;
      &lt;/div&gt;
      );
  }
  
  export default LineGraph;
  
  </code></pre>
  <p>However I am getting the following: TypeError: dispatch is not a function</p>
  <p>Any help on this would be hugely appreciated.</p>