<p dir="auto">Am trying to setup Context Api for my project but i get an error that i cannot wrap my head around, i have two files one for the data context,<br>
createDataContext is the name of the file<br>
import React, {useReducer} from 'react';</p>
<p dir="auto">export default (reducer, actions, defaultValue) =&gt; {</p>
<p dir="auto">const Context = React.createContext();<br>
const Provider = ({children}) =&gt; {<br>
const [state, dispatch] = useReducer(reducer, defaultValue);</p>
<p dir="auto">const boundActions = {};<br>
for (let key in actions){<br>
boundActions [key] = actions<a href="dispatch">key</a>;<br>
}<br>
return(<br>
&lt;Context.Provider value={{state, ...boundActions}}&gt;<br>
{ children }<br>
&lt;/Context.Provider&gt;<br>
);<br>
};<br>
return(Context, Provider);<br>
};</p>
<p dir="auto">AuthContext js file<br>
import createDataContext from './createDataContext';</p>
<p dir="auto">const authReducer = (state, action) =&gt; {<br>
switch(action.type){<br>
default:<br>
return state;<br>
}<br>
};<br>
export const {Provider, Context} = createDataContext(<br>
authReducer,<br>
{},<br>
{ isSignedIn: false }<br>
);</p>
<p dir="auto">And the Consumer App which has a switch navigator<br>
App.js<br>
import React from 'react';<br>
import {createAppContainer, createSwitchNavigator} from 'react-navigation';<br>
import {createStackNavigator} from 'react-navigation-stack';<br>
import { createDrawerNavigator } from 'react-navigation-drawer';<br>
import Login from './src/screens/Login';<br>
import Register from './src/screens/Register';<br>
import Account from './src/screens/Account';<br>
import Earnings from './src/screens/Earnings';<br>
import Scheduledrides from './src/screens/Scheduledrides';<br>
import Home from './src/screens/Home';<br>
import {Provider } from './src/Context/AuthContext';</p>
<p dir="auto">const Screens = createSwitchNavigator({<br>
loginFlow: createStackNavigator({<br>
Login: Login,<br>
Register:Register,<br>
}),</p>
<p dir="auto">mainFlow: createDrawerNavigator({<br>
Home: Home,<br>
Account: Account,<br>
Earnings: Earnings,<br>
Scheduledrides: Scheduledrides,<br>
}),</p>
<p dir="auto">});<br>
const App = createAppContainer(Screens);</p>
<p dir="auto">export default () =&gt; {<br>
return(</p>
<p dir="auto">);<br>
};<br>
Below is the error i get, thanks in advance</p>
<p dir="auto">Am trying to setup Context Api for my project but i get an error that i cannot wrap my head around, i have two files one for the data context,<br>
createDataContext is the name of the file<br>
import React, {useReducer} from 'react';</p>
<p dir="auto">export default (reducer, actions, defaultValue) =&gt; {</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const Context = React.createContext();
const Provider = ({children}) =&gt; {
    const [state, dispatch] = useReducer(reducer, defaultValue);

const boundActions = {};
for (let key in actions){
    boundActions [key] = actions[key](dispatch);
}
return(
    &lt;Context.Provider value={{state, ...boundActions}}&gt;
        { children }
    &lt;/Context.Provider&gt;
);"><pre class="notranslate"><code class="notranslate">const Context = React.createContext();
const Provider = ({children}) =&gt; {
    const [state, dispatch] = useReducer(reducer, defaultValue);

const boundActions = {};
for (let key in actions){
    boundActions [key] = actions[key](dispatch);
}
return(
    &lt;Context.Provider value={{state, ...boundActions}}&gt;
        { children }
    &lt;/Context.Provider&gt;
);
</code></pre></div>
<p dir="auto">};<br>
return(Context, Provider);<br>
};</p>
<p dir="auto">AuthContext js file<br>
import createDataContext from './createDataContext';</p>
<p dir="auto">const authReducer = (state, action) =&gt; {<br>
switch(action.type){<br>
default:<br>
return state;<br>
}<br>
};<br>
export const {Provider, Context} = createDataContext(<br>
authReducer,<br>
{},<br>
{ isSignedIn: false }<br>
);</p>
<p dir="auto">And the Consumer App which has a switch navigator<br>
App.js<br>
import React from 'react';<br>
import {createAppContainer, createSwitchNavigator} from 'react-navigation';<br>
import {createStackNavigator} from 'react-navigation-stack';<br>
import { createDrawerNavigator } from 'react-navigation-drawer';<br>
import Login from './src/screens/Login';<br>
import Register from './src/screens/Register';<br>
import Account from './src/screens/Account';<br>
import  Earnings from './src/screens/Earnings';<br>
import Scheduledrides from './src/screens/Scheduledrides';<br>
import Home from './src/screens/Home';<br>
import {Provider } from './src/Context/AuthContext';</p>
<p dir="auto">const Screens = createSwitchNavigator({<br>
loginFlow: createStackNavigator({<br>
Login: Login,<br>
Register:Register,<br>
}),</p>
<p dir="auto">mainFlow: createDrawerNavigator({<br>
Home: Home,<br>
Account: Account,<br>
Earnings: Earnings,<br>
Scheduledrides:  Scheduledrides,<br>
}),</p>
<p dir="auto">});<br>
const App =  createAppContainer(Screens);</p>
<p dir="auto">export default () =&gt; {<br>
return(<br>
<br>
<br>
<br>
);<br>
};<br>
Below is the error i get, thanks in advance<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/23630466/71403903-3a896000-2642-11ea-9956-87ed7c3efa0c.PNG"><img src="https://user-images.githubusercontent.com/23630466/71403903-3a896000-2642-11ea-9956-87ed7c3efa0c.PNG" alt="Capture" style="max-width: 100%;"></a></p>