NextJS: Context API for storing and passing values

Question

I am building this project on NextJS where I want to build a shopping cart. For that, I decided to use useContext hook. So basically what I did is pretty basic. Create a ShoppingCartContext, add a addToCart function which will push the data to store. But when I press the add to cart button it shows me that,

store.push is not a function.

edit: When I press the button first time, nothing happens. When I press it the 2nd time it gives the mentioned error. I think I did some basic stuff wrong in the code which is why I am getting this error. My context code

import {
  createContext,
  useCallback,
  useContext,
  useState,
  useEffect,
} from "react";

const ShoppingCartContext = createContext();

export function ShoppingCartContextProvider({ children }) {
  const [store, setStore] = useState([]);

  return (
    <ShoppingCartContext.Provider
      value={{
        store,
        setStore,
      }}
    >
      {children}
    </ShoppingCartContext.Provider>
  );
}

export function useShoppingCartContext() {
  const { store, setStore } = useContext(ShoppingCartContext);

  //function to push data to array
  const addToCart = (product) => {
    setStore(store.push(product));
  };

  return {
    store,
    setStore,
    addToCart,
  };
}

Where I called the button component to add data

import { useRouter } from "next/router";
import { useState } from "react";
import { useShoppingCartContext } from "../../context/CartContext";

const SingleProduct = ({ product, categories }) => {
  const { store, setStore, addToCart } = useShoppingCartContext();
  const router = useRouter();
  const breadcrumb = router.components["/shop/[[...category]]"].resolvedAs;

  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };
  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <>
   
        <Button
              onClick={() => {
                addToCart(product); // product is basically an object which holds all the info of the single product
              }}
            >
              Add to Cart
            </Button>
    </>
   )
}

my _app.js file

import "../styles/globals.css";
import { ChakraProvider } from "@chakra-ui/react";
import { ShoppingCartContextProvider } from "../context/CartContext";

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <ShoppingCartContextProvider>
        <Component {...pageProps} />
      </ShoppingCartContextProvider>
    </ChakraProvider>
  );
}

export default MyApp;

please take a look at this.

@LuisGar const/let doesn't matter. Still gives me the same error. — tanjim anim
– tanjim anim, Commented Jul 31, 2022 at 10:24

GodWin1100 · Accepted Answer · 2022-07-31 11:58:27Z

4

For updating state which is array you need to do

setStore(store => [...store, product])

//OR 

// make clone of store and then setStore
temp=[...store]
temp.push(product)
setStore(temp)

EXPLANATION OF CURRENT BEHAVIOUR

In your case it's working 1st time as you have initialized store as [] empty array.
And because it's an array it has .push() method.
But [].push(val) will not return an array it will return the length of array.
And therefore after 1st time store get's the value of numeric datatype which does not has .push() method.

Below you can see the result of .push() your self.

arr=[1,2,3] // length 3
console.log(`initial array`)
console.log(arr)
console.log(`spread operator + new val`)
console.log([...arr,5]) // spread operator + new val
console.log(`.push()`)
console.log(arr.push(5),"length=",arr.length) // .push() this will return length of the arr

edited Jul 31, 2022 at 11:58

answered Jul 31, 2022 at 11:52

GodWin1100

1,4301 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextJS: Context API for storing and passing values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related