To add context to your application you only need these three steps.

Source: /g/xampp8/htdocs/laravel/StudentTodo/ionic-rowley/ionic-rowleyV2

1. Command: ContextProvider.tsx - Create a file called ContextProvider.tsx Under src/components/context. Copy and paste the code below.

mkdir -p src/components/context
curl -s https://www.webune.com/forums/ContextProvider.tsx.html > src/components/context/ContextProvider.tsx
code src/components/context/ContextProvider.tsx

2. Wrap the provider in your application. See example App.tsx below.

3. Consume the new context in your component, for example Menu.tsx

>>>>>>>>>>>>>>>>> code <<<<<<<<<<<<<<<<<

1. Download and crecate src/components/context/ContextProvider.tsx

Typescript Source: https://www.webune.com/forums/ContextProvider.tsx.html

2. Add <ContextProvider> to src/App.tsx

import {ContextProvider} from './components/context/ContextProvider.jsx'
setupIonicReact();

const App: React.FC = () => {
  return (
    <IonApp>
      <ContextProvider>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <Menu />
          <IonRouterOutlet id="main">
            <Route path="/" exact={true}>
              <Redirect to="/math/Addition/1" />
            </Route>
            <Route path="/math/:operatorParam/:botNumParam" exact={true}>
              <Page />
            </Route>
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
      </ContextProvider>
    </IonApp>
  );
};

export default App;

3. add useStateContext and use in src/components/Menu.tsx

import { useStateContext } from "./context/ContextProvider";
const Menu: React.FC = () => {
  const { emojis } = useStateContext();
  emojis && console.log(`LINE 33 emojis=`, emojis);
 

4. Shows the value from emojis will show in console.

Done