Context providing initial value and not passed in value

Question

I'm trying to implement the approach from the accepted answer to this question.

I want a minimal global state on my project using Context in React, and I want to be able to update it very infrequently. This is what my code looks like:

layout.tsx

import { MyContext } from "@/context/myContext";
import { useState } from "react";
import Home from "@/pages/home"


export default function RootLayout({ children }) {
  const [value, setValue] = useState("init");
  const valueStore = { value, setValue };
  return (
    <html lang="en">
        <MyContext.Provider value={valueStore}>
          <body>
            <Home/>
          </body>
        </MyContext.Provider>
    </html>
  );
}

myContext.ts

import { Dispatch, SetStateAction, createContext } from 'react';

export const MyContext = createContext({
    value: "",
    setValue: (() => {}) as Dispatch<SetStateAction<string>>
})

home.tsx

import { useContext, useState } from "react";
import { MyContext } from "@/context/myContext";

export default function Home() {
  const { value, setValue } = useContext(MyContext)

  const handleSubmit = (e) => {
    e.preventDefault();
    setValue("new val")
  };

  return (
    <>
        <button onClick={handleSubmit}>
        {value}
    </>
  );
}

Even after I click, the button, the value is always "", it never updates to "init" or "new val". What am I doing wrong?

I'm using Next.js and the built-in router.

[I'm not able to reproduce](https://codesandbox.io/s/sweet-mclaren-jy3g5t?file=/src/App.js). Can you check out the link and see if there are any differences from your code? — Nicholas Tower, Jul 19 '23 at 04:24
do you mean to pass in valueStore as value in your layout.tsx instead of userStore? i can't see in your code where userStore is being defined. Am i missing something? — Nazrul Chowdhury, Jul 19 '23 at 09:23
@NazrulChowdhury yes that was a typo, sorry. I've just edited. — Miles Acq, Jul 19 '23 at 10:59
@NicholasTower interesting.. does it matter that I'm using Next.js? — Miles Acq, Jul 19 '23 at 11:00
@MilesAcq [This here](https://codesandbox.io/s/lucid-khayyam-lp8knf?file=/src/App.js) seems to work. I can't find anything other than a typo in the button. closeTag is missing. — Nazrul Chowdhury, Jul 19 '23 at 11:31

score 0 · Answer 1 · edited Aug 06 '23 at 14:53

0

I needed to add pages/_app.tsx:

export default function MyApp({ Component, pageProps }: AppProps) {
  const [value, setValue] = useState("");
  const valueStore = { value, setValue };

  return (
    <MyContext.Provider value={valueStore}>
      <Component {...pageProps} />
    </MyContext.Provider>
  );
}

https://nextjs.org/docs/pages/building-your-application/routing/custom-app

edited Aug 06 '23 at 14:53

LW001

2,452
6
27
36

answered Jul 19 '23 at 18:25

Miles Acq

71
1
9

Context providing initial value and not passed in value

1 Answers1