title: How to give a function access to useContext (React native)
body: <p>Basically I wrapped a Side Menu in a Provider and gave it menu of a function. Inside the side menu I wrapped stack navigation, so all my navigation screens have access to useContext.state. But my sidemenu's menu() has a problem with accessing useContext.state.</p>
  <p><strong>I need my sidemenu to be able to access the state and display the length of useContext.state.</strong></p>
  <p>Here is my App.js</p>
  <pre><code>import React from 'react';
  import { createAppContainer} from 'react-navigation';
  import { createStackNavigator } from 'react-navigation-stack';
  import menu from './src/components/menu';
  import SideMenu from 'react-native-side-menu-updated'
  import IndexScreen from './src/screens/IndexScreen';
  import { Provider } from './src/context/BlogContext';
  import ShowScreen from './src/screens/ShowScreen';
  import CreateScreen from './src/screens/CreateScreen';
  import EditScreen from './src/screens/EditScreen';
  
  
  const navigator = createStackNavigator({
    Index: IndexScreen,
    Show: ShowScreen,
    Create: CreateScreen,
    Edit: EditScreen,
  }, {
    initialRouteName: 'Index',
    defaultNavigationOptions: {
      title: 'Blogs',
      headerStyle: {
        backgroundColor: '#9AC4F8',
      },
      headerTintColor: &quot;white&quot;,
    },
  });
  
  const App = createAppContainer(navigator);
  
  export default () =&gt; {
    return (
      &lt;Provider&gt;
        &lt;SideMenu menu={menu()} &gt;     
          &lt;App /&gt;    
        &lt;/SideMenu&gt;
      &lt;/Provider&gt;
    );
  }
  </code></pre>
  <p>and this is my menu.js</p>
  <pre><code>import React, {useContext} from 'react';
  import { Context } from '../context/BlogContext';
  import { View, Text } from 'react-native';
  import { State } from 'react-native-gesture-handler';
  
  
  const menu = () =&gt;{
      const { state } = useContext(Context);
      console.log(state);
      return ( 
          &lt;View&gt;
              &lt;Text&gt;{State.length}&lt;/Text&gt;
          &lt;/View&gt;
    )
  }
  export default menu;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/HiCqC.jpg" rel="nofollow noreferrer">This is the error that it wrote</a></p>
  <p>Can you help me to understand how to access state in this menu function?</p>
  <p>Here is my Reducer:</p>
  <pre><code>import createDataContext from './createDataContext';
  
  const blogReducer = (state, action) =&gt; {
      switch (action.type) {
          case 'edit_blogpost':
              return state.map((blogPost) =&gt; {
                  return blogPost.id === action.payload.id ? action.payload : blogPost;                
              });
          case 'delete_blogpost':
              return state.filter((blogPost) =&gt; blogPost.id !== action.payload);
          case 'add_blogpost':
              return [
                  ...state, 
                  {
                  id: Math.floor(Math.random() * 99999), 
                  title: action.payload.title,
                  content: action.payload.content
                  }
              ];
          default:
              return state;
      }
  };
  
  const addBlogPost = (dispatch) =&gt; {
      return (title, content, callback) =&gt; {
          dispatch({type: 'add_blogpost', payload: {title: title, content: content}});
          if(callback){
              callback();
          }
      };
  };
  
  const deleteBlogPost = dispatch =&gt; {
      return (id) =&gt; {
          dispatch({ type: 'delete_blogpost', payload: id })
      };
  }
  
  const editBlogPost = dispatch =&gt; {
      return(id, title, content, callback) =&gt; {
          dispatch({ 
              type: 'edit_blogpost', 
              payload: { id:id, title:title, content:content}
          });
          if(callback){
              callback();
          }
      };
  };
  
  export const {Context, Provider} = createDataContext(
      blogReducer, 
      {addBlogPost, deleteBlogPost, editBlogPost},
      []
  );
  </code></pre>
  <p>and Context:</p>
  <pre><code>import React, { useReducer } from 'react';
  
  export default (reducer, actions, initialState) =&gt; {
      const Context = React.createContext();
  
      const Provider = ({ children }) =&gt; {
          const [state, dispatch] = useReducer(reducer, initialState);
  
          //actions === { addBlogPost: (dispatch) =&gt; {return () =&gt; {} } }
          const boundActions = {};
          for(let key in actions) {
              boundActions[key] = actions[key](dispatch);
          }
  
          return &lt;Context.Provider value={{ state: state, ...boundActions}}&gt;
              {children}
          &lt;/Context.Provider&gt;
      }
  
      return { Context, Provider };
  };
  </code></pre>