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