on finish handler of refinr-hook-form giving create-property.tsx:34 TypeError: Cannot read properti
create-property.tsx:34 TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at Function.singular (pluralize.js:136:1)
at Object.onSuccess (useCreate.ts:145:1)
at Mutation.execute (mutation.ts:226:1)
Getting this error
my file looks like this
import { useState } from "react";
import { useGetIdentity } from "@pankod/refine-core";
import { useForm } from "@pankod/refine-react-hook-form";
import { FieldValues } from "react-hook-form";
import Form from "components/common/Form";
const CreateProperty = () => {
const { data: user } = useGetIdentity();
const [propertyImage, setPropertyImage] = useState({ name: "", url: "" });
const {
refineCore: { onFinish, formLoading },
register,
handleSubmit,
} = useForm();
const handleImageChange = (file: File) => {
const reader = (readFile: File) =>
new Promise<string>((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = () => resolve(fileReader.result as string);
fileReader.readAsDataURL(readFile);
});
reader(file).then((result: string) =>
setPropertyImage({ name: file?.name, url: result }),
);
};
const onFinishHandler = async (data: FieldValues) => {
if (!propertyImage.name) return alert("Please select an image");
await onFinish({
...data,
photo: propertyImage.url,
email: user.email,
});
};
return (
<Form
type="Create"
register={register}
onFinish={onFinish}
formLoading={formLoading}
handleSubmit={handleSubmit}
handleImageChange={handleImageChange}
onFinishHandler={onFinishHandler}
propertyImage={propertyImage}
/>
);
};
export default CreateProperty;
2 Replies
Hi @jakshire01. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error you're encountering seems to be related to the
onFinish function from the useForm hook. This function is used to handle form submission and it accepts an object with properties of each record on the API, to which you can pass custom values.
In your case, you're passing an object that includes ...data, photo: propertyImage.url, and email: user.email. The error message suggests that there's an issue with reading properties of undefined, which could mean that one of these values is undefined at the time onFinish is called.
Here are a few things you could check:
1. Ensure that data, propertyImage.url, and user.email are all defined at the time onFinish is called. You can do this by adding console.log statements before the onFinish call to check the values of these variables.
2. Check the structure of the object you're passing to onFinish. The object should match the structure expected by your API.
3. Make sure that the useForm hook is being used correctly. According to the refine documentation (https://refine.dev/docs/guides-concepts/forms/#server-side-validation-), the useForm hook should be destructured like this:
In your code, you're destructuring onFinish and formLoading from refineCore, and register and handleSubmit directly from useForm. Make sure that this matches the structure of the object returned by useForm.
If you're still encountering issues after checking these things, it might be helpful to look at the source of the error in the refine codebase or reach out to the refine community for more specific help.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@418995770205929473> kapa.ai is still learning and improving, please let us know how it did by reacting below