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 > 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:

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

import {ContextProvider} from './components/context/ContextProvider.jsx'

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

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.