correct-apricot•5mo ago

useModalForm appends [object Object] onto my endpoint

So I'm trying to pop up an "Edit User" modal on my web app when the user clicks on their avatar in the top right. The only issue is that I'm relying on useModalForm() to make an API call, but it is continuously appending [object Object] to my endpoint. So here's the call from the useModalForm():

    console.log(userId, userId?.data, userId?.data.id, isError, isLoading, typeof(userId?.data.id));
    // const dynamoId : string = userId?.data?.id || "failed-call"
    // console.log("Constructed Resource URL:", `${RESOURCES.USERS}/some-tenant/some-org/${dynamoId}`);
    const {
        modalProps: editUserModalProps,
        formProps: editUserFormProps,
        show: editUserShow,
    } = useModalForm<IUser>({
        action: API_ACTIONS.EDIT,
        warnWhenUnsavedChanges: true,
        resource: `${RESOURCES.USERS}/some-tenant/some-org`,
        id: userId?.data.id
    });

    console.log(userId, userId?.data, userId?.data.id, isError, isLoading, typeof(userId?.data.id));
    // const dynamoId : string = userId?.data?.id || "failed-call"
    // console.log("Constructed Resource URL:", `${RESOURCES.USERS}/some-tenant/some-org/${dynamoId}`);
    const {
        modalProps: editUserModalProps,
        formProps: editUserFormProps,
        show: editUserShow,
    } = useModalForm<IUser>({
        action: API_ACTIONS.EDIT,
        warnWhenUnsavedChanges: true,
        resource: `${RESOURCES.USERS}/some-tenant/some-org`,
        id: userId?.data.id
    });

The top line's console.log returns this:

userId = Object { data: {…} }
userId?.data = Object { id: "2811c1ac-e118-4eb8-b2b6-25f541614178", username: "6e671cbb-a206-4a05-ae2a-1afea5af2f14" }
userId?.data.id = 2811c1ac-e118-4eb8-b2b6-25f541614178 
isError = false 
isLoading = false 
typeof(userId?.data.id) = string

userId = Object { data: {…} }
userId?.data = Object { id: "2811c1ac-e118-4eb8-b2b6-25f541614178", username: "6e671cbb-a206-4a05-ae2a-1afea5af2f14" }
userId?.data.id = 2811c1ac-e118-4eb8-b2b6-25f541614178 
isError = false 
isLoading = false 
typeof(userId?.data.id) = string

This is the URL the front end tries to call as a result: GET https://3sagmc8ygj.execute-api.us-east-2.amazonaws.com/staging/api/users/some-tenant/some-org/[object%20Object] Here's how I'm calling that modalForm:

                    <Space size="middle">
                    {/* TODO: () => editUserShow() not working?? */}
                        <div onClick={editUserShow}>  
                            {user?.avatar && (
                                <Avatar
                                    shape="square"
                                    src={user?.avatar}
                                    alt={user?.name}
                                />
                            )}
                        </div>
                    </Space>

                    <Space size="middle">
                    {/* TODO: () => editUserShow() not working?? */}
                        <div onClick={editUserShow}>  
                            {user?.avatar && (
                                <Avatar
                                    shape="square"
                                    src={user?.avatar}
                                    alt={user?.name}
                                />
                            )}
                        </div>
                    </Space>

5 Replies

kapa.ai•5mo ago

Hi @zain. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided, it seems like the id you're passing to useModalForm is not being recognized as a string, even though your console.log indicates that it is. This could be due to some asynchronous behavior or a timing issue where the id is not yet defined at the time useModalForm is being called. One way to debug this is to ensure that the id is defined before calling useModalForm. You could do this by adding a conditional check before the useModalForm call:

let editUserModalProps, editUserFormProps, editUserShow;

if (userId?.data?.id) {
    const {
        modalProps,
        formProps,
        show,
    } = useModalForm<IUser>({
        action: API_ACTIONS.EDIT,
        warnWhenUnsavedChanges: true,
        resource: `${RESOURCES.USERS}/some-tenant/some-org`,
        id: userId.data.id
    });

    editUserModalProps = modalProps;
    editUserFormProps = formProps;
    editUserShow = show;
}

let editUserModalProps, editUserFormProps, editUserShow;

if (userId?.data?.id) {
    const {
        modalProps,
        formProps,
        show,
    } = useModalForm<IUser>({
        action: API_ACTIONS.EDIT,
        warnWhenUnsavedChanges: true,
        resource: `${RESOURCES.USERS}/some-tenant/some-org`,
        id: userId.data.id
    });

    editUserModalProps = modalProps;
    editUserFormProps = formProps;
    editUserShow = show;
}

This way, useModalForm will only be called when userId.data.id is defined. If this doesn't solve the issue, it might be helpful to look into the implementation of useModalForm and how it handles the id parameter. Unfortunately, the provided extracts do not contain enough information to provide a more specific solution. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@155920130302279680> kapa.ai is still learning and improving, please let us know how it did by reacting below

correct-apricot•5mo ago

@kapa.ai The app now crashes, here is the complete log:

Uncaught Error: Rendered more hooks than during the previous render.
    React 5
    ot useModalForm.ts:134
    Header Header.tsx:65
    React 13
react-dom.development.js:16507:12

Uncaught Error: Rendered more hooks than during the previous render.
    React 5
    ot useModalForm.ts:134
    Header Header.tsx:65
    React 13
react-dom.development.js:16507:12

Line 65 is this line from the previous message: } = useModalForm<IUser>({

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message "Rendered more hooks than during the previous render" is a common React error that occurs when the rules of Hooks are violated. Hooks must follow two rules: 1. Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions. 2. Only call Hooks from React function components. Don’t call Hooks from regular JavaScript functions. In your case, the useModalForm hook is being called inside a conditional block. This is likely causing the error because the number of hook calls can change between renders, which is not allowed in React. To fix this, you could use a state variable to store the userId and only update it when it's defined. Then, call useModalForm with this state variable. Here's an example:

const [userIdState, setUserIdState] = useState(null);

useEffect(() => {
  if (userId?.data?.id) {
    setUserIdState(userId.data.id);
  }
}, [userId]);

const {{
    modalProps: editUserModalProps,
    formProps: editUserFormProps,
    show: editUserShow,
}} = useModalForm<IUser>({{
    action: API_ACTIONS.EDIT,
    warnWhenUnsavedChanges: true,
    resource: `${{RESOURCES.USERS}}/some-tenant/some-org`,
    id: userIdState
}});

const [userIdState, setUserIdState] = useState(null);

useEffect(() => {
  if (userId?.data?.id) {
    setUserIdState(userId.data.id);
  }
}, [userId]);

const {{
    modalProps: editUserModalProps,
    formProps: editUserFormProps,
    show: editUserShow,
}} = useModalForm<IUser>({{
    action: API_ACTIONS.EDIT,
    warnWhenUnsavedChanges: true,
    resource: `${{RESOURCES.USERS}}/some-tenant/some-org`,
    id: userIdState
}});

In this code, useEffect is used to update userIdState whenever userId changes. useModalForm is then called with userIdState as the id. This ensures that useModalForm is always called during each render, which should prevent the error. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@155920130302279680> kapa.ai is still learning and improving, please let us know how it did by reacting below