import { createContext, useReducer } from "react"; import AppReducer from "./AppReducer"; //intial state const initialState = { transactions: [ { id: 1, text: "Flower", amount: -20 }, { id: 2, text: "Salary", amount: 300 }, { id: 3, text: "Book", amount: -10 }, { id: 4, text: "Camera", amount: 150 }, ], }; // Create Global Context export const GlobalContext = createContext(initialState); // provider component export const GlobalProvider = ({ children }) => { const [state, dispatch] = useReducer(AppReducer, initialState); // Actions const deleteTransaction = (id) => { dispatch({ type: "DELETE_TRANSACTION", payload: id, }); }; return ( <GlobalContext.Provider value={{ transactions: state.transactions, deleteTransaction }} > {children} </GlobalContext.Provider> ); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>