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>
kapa.ai
kapa.ai79d 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
kapa.ai79d ago
<@155920130302279680> kapa.ai is still learning and improving, please let us know how it did by reacting below
stormy-gold
stormy-gold79d 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
kapa.ai79d 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
kapa.ai79d ago
<@155920130302279680> kapa.ai is still learning and improving, please let us know how it did by reacting below
More Posts
how to scroll top when you navigate another page?how to scroll top when you navigate another page?Editing functions in graphqlDataProviderWhen I edit the custom function in my graphqlDataProvider, the changes doesn't show, it still functiCreate a custom hook like useMany or useOne without sending idsI have this ``` const { data } = useMany<any, HttpError>({ ids: [], resource: REi want to get one more field with useSelectconst {options, queryResult} = useSelect({ resource, optionValue: useFilter ? "country_codehow to manipulate data for stepForm ant dhow to manipulate data for stepForm ant d before calling apiHey, general questions about the devHey, general questions about the dev tools. Why does it require a github or google login. I am usiTrouble Integrating NextUI with Next.js App Routing Mode: Need Help!I've downgraded next to 14.0.4, and it's working nowBearer token with all routingHow can I get a bearer token authorization header (whose value comes from a cookie) to be inserted iQuery distinct data in useDataGridI have a table with many entries identified by a reference and with a timestamp field. I want to genrefine as a subroute in nextjs appI have an existing NextJS app with NextAuth. How can i add retool to *only* a sub route of /admin?useSelect pagination next page load triggerWhen using useSelect with pagination, how do I change pages?up to date supabase nextjs implementation of refine?#supabase #nextjsantd-img-cropAs the Ant Design documentation in the "Upload" component suggests, I imported the "antd-img-crop" lselect propsHow to use select props to get 2 datas from same resourceCreate & edit a many to many relationship with supabaseHi, I'm new to Refine and I'm looking for a more elegant way to manage many-to-many relationships wiHost an appI want to host my app via github pages, what should I add to my code and which commands should I run