Next.js Discord

Discord Forum

Confused with zod and onSubmit functions...

Answered
Mugger Crocodile posted this in #help-forum
Open in Discord
Mugger CrocodileOP
async function onSubmit(values: AnimalType) {
    console.log(values);

    const shelterSlug = pathname.split("/")[2];
    values["shelterSlug"] = shelterSlug;

    try {
      await createAnimal(values);
    } catch (error) {
      console.log(error);
      alert("Something went wrong");
    }
  }

I have shelterSlug as a field in zod validation because that's how I know which record to update in server actions. I console logged the values before assigning the shelterSlug value. How does it know the value of shelterSlug before hand?
Answered by ᴉuɐpɹɐɐ
this is crazy idea but try
async function onSubmit(values: AnimalType) {
    console.log(values);
      
    await delay(1000);

    const shelterSlug = pathname.split("/")[2];
    values["shelterSlug"] = shelterSlug;

    try {
      await createAnimal(values);
    } catch (error) {
      console.log(error);
      alert("Something went wrong");
    }
  }
View full answer

34 Replies

did you use react-hook-form? if so can you tell me what did ou pass in useForm?
Mugger CrocodileOP
I used react-hook-form with shadcn, 
const form = useForm<AnimalType>({
    resolver: zodResolver(AnimalSchema),
    defaultValues: {
      neutered: false,
    },
  });

I haven't taken the shelterSlug input anywhere elsewhere as an input field
ᴉuɐpɹɐɐ
interesting
Mugger CrocodileOP
If I remove the shelterSlug declaration, it doesn't know the value
I'll show 1sec
ᴉuɐpɹɐɐ
you dont have hidden inputs like <Input name="shelterSlug" readOnly> ?
Mugger CrocodileOP
nope
This is after I commented out the lines after 
console.log(values)
ᴉuɐpɹɐɐ
this is crazy idea but try
async function onSubmit(values: AnimalType) {
    console.log(values);
      
    await delay(1000);

    const shelterSlug = pathname.split("/")[2];
    values["shelterSlug"] = shelterSlug;

    try {
      await createAnimal(values);
    } catch (error) {
      console.log(error);
      alert("Something went wrong");
    }
  }
Answer
ᴉuɐpɹɐɐ
and see if the shelterSlug is still there
is createAnimal the server action?
@ᴉuɐpɹɐɐ is `createAnimal` the server action?
Mugger CrocodileOP
yes
@ᴉuɐpɹɐɐ and see if the `shelterSlug` is still there
Mugger CrocodileOP
Yeah,its still there
Yeah, the word shelterSlug is mentioned 3 times in the file and all of them are in onSubmit function...
oh
ok nvm
Mugger CrocodileOP
Am I supposed to use any kind of formData sending data to the server action?
Mugger CrocodileOP
@ᴉuɐpɹɐɐ Yeah, If I set the default value of shelterSlug as "hello" and remove the shelterslug in onSubmit it says shelterSlug: "hello".. Are console logs time consuming or something?
@ᴉuɐpɹɐɐ I increased the delay to 5000 and now its working
you're right
is it some async stuff?
ᴉuɐpɹɐɐ
probably yeah
im not sure what happened
Mugger CrocodileOP
👀
also, when passing data into server actions are you supposed to use FormData objects?
ᴉuɐpɹɐɐ
not necessarily
@ᴉuɐpɹɐɐ not necessarily
Mugger CrocodileOP
Is it a good practice? How do I also pass eg. shelterSlug? I just added it as a optional input field..
ᴉuɐpɹɐɐ
that should be sufficient
try console.logging in your server action
it should return all necessary data that you passed into it
Mugger CrocodileOP
alright ty