👎 useContext: <ImgProvider> {App} </ImgProvider/> [4:40pm]

frankcollins3 commented 1 year ago

attempting to do: wrap the app with useContext to declare img src={imgFromContext}/> // this is already set up correctly in: ghub.com/frankcollins3/fill_cont (react-express)

error: import React, { createContext, useContext, ReactNode, useState } from "react";

const imagePrefix:string = "/water_img/" const googlePrefix:string = "/google_img/"

// type the state which will be read-only 'string' type imgContextType = { bottles: string; }

const imgDefaults: imgContextType = { bottles: ${imagePrefix}bottles.png, };

// createContext const ImgContext = createContext(imgDefaults);

export function useImage() { return useContext(ImgContext); }

type Props = { children: ReactNode; };

export function ImgProvider({ children }: Props) { const [gameOn, setGameOn] = useState('not playing'); const [ReusableImageObject, setReusableImageObject] = useState({ src: '', size: 0, unit: '', className: '', id: '', func: '', event: ''})

const [bottles, setBottles] = useState<string>(`${imagePrefix}bottles.png`);

    // * user functionality ends above

const value = {
bottles

return (
    <>
        <ImgContext.Provider value={value}>
            {children}
        </ImgContext.Provider>
    </>
);

}

[4:40pm] App.tsx: import ImgProvider from "Contexts/ImgContext

    return (

      <>
        <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        </Head>
👎       <ImgProvider>

      <Navbar2/>

      <Component {...pageProps}/>         

👎       </ImgProvider>

      </>     
    )

proposed approach:

frankcollins3 commented 1 year ago

already solved: forgot to import as object since it's not an export default just an export const 👍 import {ImgProvider} from "Contexts/ImgContext" [4:58pm]

frankcollins3 commented 1 year ago

have to look low and high I started using these vars, saw an error, looked around and realized obj destructure wasn't used: const { smallDroplet, msgBottle, statistics, settings } = useImage()

quickly thought: some kind of version issue or something different about using useContext in such way with Next just forgot to declare the variables from the export values.

[5:01pm]

frankcollins3 / Next-Water-App

👎 useContext: <ImgProvider> {App} </ImgProvider/> [4:40pm] #15