Context doesn't update the value

January 5, 2022

I have a context like that

type ScanContextState = {
  confirm: boolean;
  toggleConfirm: () => void;
};

const defaultState: ScanContextState = {
  confirm: false,
  toggleConfirm: () => {},
};

export const ConfirmScanningContext =
  createContext<ScanContextState>(defaultState);

export const ScannigProvider: FC = ({ children }) => {
  const [confirm, setConfirm] = useState(defaultState.confirm);

  const toggleConfirm = () => {
    setConfirm(!confirm);
  };
  return (
    <ConfirmScanningContext.Provider value={{ confirm, toggleConfirm }}>
      {children}
    </ConfirmScanningContext.Provider>
  );
};

and I call the toggleConfirm in a screen when the scanning is done like that toggleConfirm();
and here is the root of my app

import PaymentBottomSheet from "./PaymentBottomSheet";
import MainStackNavigator from "./MainStackNavigator";
import { ScannigProvider } from "./Contexts";
import { ConfirmScanningContext } from "./Contexts";
const Root: React.FC = () => {
  const [showScan, setScan] = useState(false);
  const { confirm, toggleConfirm } = useContext(ConfirmScanningContext);

  return (
    <>
      <ScannigProvider>
        <IconRegistry icons={EvaIconsPack} />
        <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
          <NavigationContainer>
            <MainStackNavigator
              setScan={setScan}
            />
            {confirm && <PaymentBottomSheet setScan={setScan} />}
          </NavigationContainer>
        </ApplicationProvider>
      </ScannigProvider>
    </>
  );
};

export default Root;

I want to view the PaymentBottomSheet when confirm is true, however I don’t know why it never gets true although I toggle it as I said before. I am new to contexts using typescript so kindly could someone explain to me why it isn’t updated!

>Solution :

The context provider needs to be higher up the component tree than the context consumer. In Root, you’re consuming the context:

const { confirm, toggleConfirm } = useContext(ConfirmScanningContext);

…but there is no provider higher up the tree than Root, so you are getting the default value of the context. That default value has an empty function for toggleConfirm, so nothing happens when you call it.

You’ll need to break your components up so that the provider can be on top. For example:

const Root: React.FC = () => {
  return (
    <ScannigProvider>
      <SomeOtherComponent/>
    </ScannigProvider>
  );
}

const SomeOtherComponent: React.FC = () => {
  const [showScan, setScan] = useState(false);
  const { confirm, toggleConfirm } = useContext(ConfirmScanningContext);

  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider {...eva} theme={{ ...eva.light, ...theme }}>
        <NavigationContainer>
          <MainStackNavigator
            setScan={setScan}
          />
          {confirm && <PaymentBottomSheet setScan={setScan} />}
         </NavigationContainer>
      </ApplicationProvider>
    </>
  )
}