pale flower
I'm having an issue calling one of my actions in a client component. What I have is a form with an attribute of action, this calls a function which saves one of the form data and calls a server function. However, it doesn't allow me to make the request.. why?
Uncaught Error: Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again.
/page.tsx
<form action={(data) => handleSubmit(data, user, isNewGoogleUser)} className={styles.form__container} autoComplete="true">
<div className={styles.form__option}>
<label htmlFor="highschool">High School</label>
<div className={`${styles.input__container} ${styles.input__option}`}>
<Image src={"/svgs/info-circle.svg"} alt="Info Icon" width={20} height={20} />
<input type="text" id="highschool" name="highschool" onChange={({ target }) => user.setProperty("currentHighschool", target.value)} placeholder="Tell us your current highschool" />
</div>
</div>
<button type="submit" className={styles.next}>
<Image src={"/svgs/thumb-up.svg"} alt="Thumbs Up" width={24} height={24} />
Finish
</button>
</form>
// * Handle storing and submitting data
async function handleSubmit(data: FormData, user: UserInfo, isNewGoogleUser: boolean) {
const highschool = data.get("highschool");
if (highschool) user.setProperty("currentHighschool", highschool);
createUser(user, isNewGoogleUser)
}
_actions/info.ts
export async function createUser(user: UserInfo, isGoogleUser: boolean) {
console.log(user, isGoogleUser);
return;
}
still grotto
