SolidJS•11mo ago

Solid context doesnt work

Learning solid using docs and i use the docs example to create a context but for some reason this error appears, can someone help or give a sugestionon how i can fix? mycode:

 
import { createContext, useContext } from "solid-js"
import { createStore } from "solid-js/store"

const CartContext = createContext({})

type CartItem = {
    item: string,
    amount: number
}

type CartProviderProps = {
    children: any // dunno how to type children ;-; docs doest help 
}


export function CartProvider({
    children
}: CartProviderProps) {

    const [cartData, setCartData] = createStore<CartItem[]>([])

    // Actions
    function addToCart(item: string, amount: number) {

        setCartData([...cartData, {
            item, amount
        }])
    }
    function removeFromCart(itemId: string) {

        setCartData(cartData.filter(item => item.item !== itemId))
    }
    function changeItemAmount(itemId: string, amount: number) {

        setCartData(cartData.map(item => {
            if (item.item === itemId) {
                return {
                    ...item,
                    amount
                }
            }

            return item
        }))
    }

    return (
        <CartContext.Provider value={{
            cartData,
            addToCart,
            removeFromCart,
            changeItemAmount,
        }}>
            {children}
        </CartContext.Provider>
    )
}

export function useCart() { return useContext(CartContext) }

 
import { createContext, useContext } from "solid-js"
import { createStore } from "solid-js/store"

const CartContext = createContext({})

type CartItem = {
    item: string,
    amount: number
}

type CartProviderProps = {
    children: any // dunno how to type children ;-; docs doest help 
}


export function CartProvider({
    children
}: CartProviderProps) {

    const [cartData, setCartData] = createStore<CartItem[]>([])

    // Actions
    function addToCart(item: string, amount: number) {

        setCartData([...cartData, {
            item, amount
        }])
    }
    function removeFromCart(itemId: string) {

        setCartData(cartData.filter(item => item.item !== itemId))
    }
    function changeItemAmount(itemId: string, amount: number) {

        setCartData(cartData.map(item => {
            if (item.item === itemId) {
                return {
                    ...item,
                    amount
                }
            }

            return item
        }))
    }

    return (
        <CartContext.Provider value={{
            cartData,
            addToCart,
            removeFromCart,
            changeItemAmount,
        }}>
            {children}
        </CartContext.Provider>
    )
}

export function useCart() { return useContext(CartContext) }

4 Replies

Alex Lohr•11mo ago

The variables for contexts are supposed to be lower case. Otherwise they are wrapped like normal components.

Carere•11mo ago

Should the extension be tsx ?

o gabriel•11mo ago

thank you very much for the help, everyone in the company is laughing a lot here for my mistake A common mistake by me ;-;

Carere•11mo ago

Haha no PB 😅, you're welcome 😁

Gaming

Programming

Solid context doesnt work