Passing function to context api comes up undefined react

Question

I have an on click function that is to open an auth dialog and when the user does auth logic and success it should close the dialog and do a callback function say a simple console.log("success")

                     onClick={async () => {
                        if (!auth) {
                          setOpen(true);
                          setActive(1);

                          // below is problem code
                          setSuccessCallBack(()=>{});

                          return;
                        }
                      }}

this is the modal context

import React, { createContext, useCallback, useContext, useState } from "react";

const AuthModalContext = createContext({});

export const useAuthModal = () => useContext(AuthModalContext);

export default function AuthModalContextProvider({ children }) {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const [actionMode, setActionMode] = useState(null);
  const [destination, setDestination] = useState(null);
  const [successCallBack, setSuccessCallBack] = useState(()=>{console.log("12")});


  return (
    <AuthModalContext.Provider
      value={{
        open,
        setOpen,
        active,
        setActive,
        actionMode,
        setActionMode,
        destination,
        setDestination,
        successCallBack,
        setSuccessCallBack,
      }}
    >
      {children}
    </AuthModalContext.Provider>
  );
}

This is the layout file where the modal lies

export default function Layout({ children }) {
  const router = useRouter();
  const authModal = useAuthModal();

  const {
    open,
    setOpen,
    active,
    setActive,
    actionMode,
    setActionMode,
    destination,
    setDestination,
    successCallBack,
    setSuccessCallBack,
  } = authModal;
  return (
    <>
 <AuthDialog
        setOpen={setOpen}
        open={open}
        active={active}
        setActive={setActive}
        actionMode={actionMode}
        setActionMode={setActionMode}
        destination={destination}
        setDestination={setDestination}
        successCallBack={successCallBack}
        setSuccessCallBack={setSuccessCallBack}
      />

And this is the _app js

 <AuthModalContextProvider>
          <AuthContextProvider>
            <Layout>
              <div id="root">
                <Component {...pageProps} />
              </div>
            </Layout>
          </AuthContextProvider>
        </AuthModalContextProvider>

And the Dialog itself is radix ui dialog

const AuthDialog = ({
  open,
  setOpen,
  active,
  setActive,
  actionMode,
  setActionMode,
  destination,
  setDestination,
  successCallBack,
  setSuccessCallBack,
}) => {


  return (
    <>
      <Dialog.Root
        open={open}
        onOpenChange={(open) => {
          // console.log(open)
          if (!open) {
            // console.log(open)
            console.log(successCallBack);
            // successCallBack()

            setOpen(open);
            setActionMode(null);
          }
        }}
      >
        <Dialog.Trigger asChild></Dialog.Trigger>
</Dialog.Root>

When I set the successCallBack as a function it comes up undefined when I close the modal. A normal string works like setSuccessCallBack("hello"); that value does not get lost but when I do setSuccessCallBack(()=>{console.log("hello"}); it is undefined when I close the dialog. How can I solve this. And also any other solution is welcome just for context the flow I need is a user wants to do a authed function, open dialog, let them get authenticated and on close do the action for them automatically based on where they left off. Instead of them clicking the action again. Think liking a photo and not authed so show auth dialog, get authed, close dialog and do the thing.

I want to make the callback function reusable for different functions across app. So this button click would do that function and another button another function, from the same auth dialog

Passing function to context api comes up undefined react

0 Answers0