adverse-sapphire•8mo ago

getting this error Cannot read properties of undefined (reading 'email')TypeError: Cannot read prop

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; This is my create property code gettin g error on onfinishhandler

2 Replies

kapa.ai•8mo ago

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 message you're seeing suggests that user is undefined at the time you're trying to access its email property. This could be because the useGetIdentity hook is not returning any data. In the provided extracts, there is a similar issue discussed in a GitHub discussion (https://github.com/refinedev/refine/discussions/4459) where the useGetIdentity hook doesn't return the expected user identity. However, there is no official answer or solution provided in the extracts. To handle form submission, you can use the onFinish method from the useForm hook as shown in the refine blog (https://refine.dev/blog/react-hook-form-validation-examples/#form-submission) and refine documentation (https://refine.dev/docs/core/hooks/use-form/#usage). Here's an example of how you can use it:

const { onFinish } = useForm();

const onSubmit = (e) => {
    e.preventDefault();
    onFinish(values);
};

const { onFinish } = useForm();

const onSubmit = (e) => {
    e.preventDefault();
    onFinish(values);
};

In your case, you might want to check if user is defined before trying to access its email property:

const onFinishHandler = async (data: FieldValues) => {
    if (!propertyImage.name) return alert("Please select an image");

    if (!user || !user.email) {
        return alert("User email is not available");
    }

    await onFinish({
        ...data,
        photo: propertyImage.url,
        email: user.email,
    });
};

const onFinishHandler = async (data: FieldValues) => {
    if (!propertyImage.name) return alert("Please select an image");

    if (!user || !user.email) {
        return alert("User email is not available");
    }

    await onFinish({
        ...data,
        photo: propertyImage.url,
        email: user.email,
    });
};

If the problem persists, it might be a good idea to check the documentation or seek help from the refine community. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

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