> _No description provided._

[muskan-Bansal]

No description provided.

it works if wrap it in _app.js file this way

function MyApp({ Component, pageProps }) { return ( <> <Layout> <Toaster /> <StateContext> <Component {...pageProps} /> </StateContext> </Layout> </> ); }

But now the problem is functions we passed in the context api like incQty doesnt change the state of qty on click

Could you please tell me what exactly is going wrong

[SoumyaSubhrajit]

hi, @muskan-Bansal the problem you are facing in the code is , in the context/SateContext.js we have the coutomize hooks by using createContext() and useContext(Context) by this we can pass our custom props in multiple component , so if we wrap StateContext in _app.js by this we make sure we can pass our props in side all component underneath it.

so the code will be like this -

`import React from 'react'; import { Toaster } from 'react-toastify' // import 'ecom/styles/globals.css' import '../styles/globals.css'; import { Layout } from '../components/Layout'; import { StateContext } from '../context/StateContext';

export default function App({ Component, pageProps }) { return (

// It means we can pass the data from StateContext to every single components inside of it...
<StateContext>
  <Layout>
    {/* THIS SHOWING ERROR */}
    {/* <Toaster /> */}
    <Component {...pageProps} />
  </Layout>
 </StateContext>

) } `

Hope it solve your error..