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()
:
The top line's console.log
returns this:
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
:
5 Replies
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:
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:
----------------------<@155920130302279680> kapa.ai is still learning and improving, please let us know how it did by reacting below
equal-aqua•7mo ago
@kapa.ai
The app now crashes, here is the complete log:
Line 65 is this line from the previous message:
} = useModalForm<IUser>({
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:
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:
----------------------<@155920130302279680> kapa.ai is still learning and improving, please let us know how it did by reacting below