I’m trying to use the context that I created to a really simple shopping cart example, for that, I created some functions and when I try to use it inside of my component, the error pops up.
I’m actually a beginner when it comes to using Context API, so if anyone could help, I’d be really happy.
Here’s my context
"use client";
import { createContext, useState, ReactNode } from "react";
import { ShoppingCartProviderProps } from "../types/ShoppingCartProvider";
import { ShoppingCartFunction } from "../types/ShoppingCartFunction";
import { ProductCartItem } from '../types/Product';
export const ShoppingCartContext = createContext({} as ShoppingCartFunction);
export function ShoppingCartProvider({ children }: ShoppingCartProviderProps) {
const [cartItem, setCartItem] = useState<ProductCartItem[]>([]);
function getItemQuantity(id: number) {
return cartItem.find(item => item.id === id)?.quantity || 0;
}
function increaseItemQuantity(id: number) {
setCartItem(currItems => {
if (currItems.find(item => item.id === id) == null) {
return [...currItems, { id, quantity: 1 }];
} else {
return currItems.map(item => {
if (item.id === id) {
return { ...item, quantity: item.quantity + 1 };
} else {
return item;
}
});
}
});
}
function decreaseItemQuantity(id: number) {
setCartItem(currItems => {
if (currItems.find(item => item.id === id)?.quantity === 1) {
return currItems.filter(item => item.id !== id);
} else {
return currItems.map(item => {
if (item.id === id) {
return { ...item, quantity: item.quantity - 1 };
} else {
return item;
}
});
}
});
}
function removeFromCart(id: number) {
setCartItem(currentItems => {
return currentItems.filter(item => item.id !== id);
});
}
return (
<ShoppingCartContext.Provider value={{ getItemQuantity, increaseItemQuantity, decreaseItemQuantity, removeFromCart }}>
{children}
</ShoppingCartContext.Provider>
);
}
How I’m getting the data from API:
export const getData = async () => {
const res = await fetch('https://fakestoreapi.com/products?limit=5');
if (!res.ok) {
throw new Error();
}
return res.json();
};
And the component that I’m trying to render within the context
import { ShoppingCartContext } from "@/app/context/ShoppingCartContext";
import { getData } from "@/app/data/fetchData";
import { ProductCardDescType } from "@/app/types/Product";
import ProductCard from "@/components/ProductCard/ProductCard";
import { useContext } from "react";
export default async function Store() {
const post = await getData();
const { getItemQuantity } = useContext(ShoppingCartContext)
return (
<div>
<h1>Store</h1>
{post.map((product: ProductCardDescType) => (
<ProductCard key={product.id} {...product} />
))}
</div>
);
}
Provider:
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import NavBar from "@/components/NavBar/NavBar";
import { ShoppingCartProvider } from "./context/ShoppingCartContext";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ShoppingCartProvider>
<NavBar/>
{children}
</ShoppingCartProvider>
</body>
</html>
);
}
I wanna use it the context within the component, and then use the other functions that I created for it.
New contributor
Davi Sá is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.