React Context State Not Updating

Question

My Context:

type Props = {
  children: React.ReactNode;
};

interface Context {
  postIsDraft: boolean;
  setPostIsDraft: Dispatch<SetStateAction<boolean>>;
}

const initialContext: Context = {
  postIsDraft: false,
  setPostIsDraft: (): void => {},
};

const EditPostContext = createContext<Context>(initialContext);

const EditPostContextProvider = ({ children }: Props) => {
  const [postIsDraft, setPostIsDraft] = useState<boolean>(
    initialContext.postIsDraft
  );
  return (
    <EditPostContext.Provider
      value={{
        postIsDraft,
        setPostIsDraft,
      }}
    >
      {children}
    </EditPostContext.Provider>
  );
};

export { EditPostContext, EditPostContextProvider };

I set postIsDraft in the parent:

export const ParentComponent = () => {
  { setPostIsDraft } = useContext(EditPostContext);

  // some code

  const updatePostStatus = (postStatus: boolean) => {
    setPostIsDraft(postStatus);
  }

  // some code
  
  return(
    <EditPostContextProvider>
      <ChildComponent />
    </EditPostContextProvider>
  )
}

Then I need to read the value in the child component:

  const { postIsDraft } = useContext(EditPostContext);

Only just starting use context, just not sure what I've done wrong. When I try and read the value from context in the child component, I'm only getting back the initial value, not the set value in the parent component.

Enfield Li · Accepted Answer · 2022-05-14 10:02:12Z

2

Your ParentComponent should be wrapped inside provider so as to use it's value:

    <EditPostContextProvider>
      <ParentComponent />
    </EditPostContextProvider>

Generally we can put the provider in index.js file, and wrap <app /> in it

answered May 14, 2022 at 10:02

Enfield Li

2,6201 gold badge15 silver badges33 bronze badges

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

2 Comments

MM1010 Over a year ago

Thank you, I'll accept once the timer is up, I think that's done it. Is there a preferred way of handling multiple providers in this way? The index.js file could get quite busy with multiple nested providers I'm guessing?

Enfield Li Over a year ago

Wrapper hell is sometimes a issue with readability in react, but other than that, I don't think there's anything wrong with mutiple providers/wrappers

Collectives™ on Stack Overflow

React Context State Not Updating

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related