I might be completely wrong or this error would be caused something from my end but I feel for some reason TrackContext file is not able to send functions through Context and Provider ?
I have attached TrackContext as well as createDataContext file.
TrackContext.js
`import createDataContext from "./createDataContext";
import trackerApi from "../api/trackerApi";
const trackReducer = (state, action) => {
switch (action.type) {
case "fetch_tracks":
return action.payload;
default:
return state;
}
};
const fetchTracks = (dispatch) => async () => {
const response = await trackerApi.get("/tracks");
dispatch({ type: "fetch_tracks", payload: response.data });
};
const createTrack = (dispatch) => async (name, locations) => {
console.log(name, locations);
await trackerApi.post("/tracks", { name, locations });
};
export const { Context, Provider } = createDataContext(
trackReducer,
{ fetchTracks, createTrack },
[]
);
`
createDataCOntext.js
`import React, { useReducer } from "react";
export default function createDataContext(reducer, actions, defaultValue) {
const context = React.createContext();
const Provider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, defaultValue);
const boundActions = {};
for (let key in actions) {
boundActions[key] = actionskey;
}
return (
<context.Provider value={{ state, ...boundActions }}>
{children}
</context.Provider>
);
};
return { Context: context, Provider: Provider };
}
`