Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Why do I need to refresh or go to another tab before the field shows?

so I’m almost finish with my update form but I’ve got a problem in my conditional field. So I have a select field wherein it will show a conditional field depending on the selected value, but the problem I’m encountering right now, is I need to refresh or click another tab before showing.

In this code, I call the data in my database, and watch() it.

 const { data: dataEvent, isLoading: isLoadingEvent } = useQuery({
    queryKey: ["edit", id],
    queryFn: async () => {
      const res = await getDataById(id);
      return res;
    },
  });

  const form = useForm<Events>({
    resolver: zodResolver(formSchemaData),
  });


  let watchEvent = form.watch('meetingTypeOption')

This is the form.

<FormField
  control={form.control}
  name="meetingTypeOption"
  defaultValue={
    dataEvent?.meetingTypeOption as
      | "meeting"
      | "webinar"
      | "hybrid"
      | "documentation"
      | "training"
      | undefined
  }
  render={({ field }) => (
    <FormItem className="w-full">
      <FormLabel>Type of Service</FormLabel>
      <Select
        onValueChange={(value) => meetingTypeOnchange(value)}
        defaultValue={field.value}
      >
        <FormControl>
          <SelectTrigger>
            <SelectValue placeholder="Select a meeting type" />
          </SelectTrigger>
        </FormControl>
        <SelectContent>
          <SelectItem value="meeting">Zoom Meeting</SelectItem>
          <SelectItem value="webinar">Zoom Webinar</SelectItem>
          <SelectItem value="hybrid">Hybrid</SelectItem>
          <SelectItem value="documentation">Documentation</SelectItem>
          <SelectItem value="training">Training</SelectItem>
        </SelectContent>
      </Select>

      <FormMessage />
    </FormItem>
  )}
/>;

And these are my conditional fields, I didn’t put all the code since It’s just a checkbox and it doesn’t do anything to the question.

{dataEvent?.meetingOption === 'webinar' && (
<div>

</div>
)}

{dataEvent?.meetingOption === 'meeting' && (
<div>

</div>
)}

Now this is what happens. As you can see in the video, after redirecting to the page, there is no checkbox, but after clicking other tabs, it re-appears, and when I’m trying to console.log() my watch, I get undefined first and then I get the value after clicking another tab.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I don't know if this is the best solution, but this is what I got. Since the data can only show during changing tab or refresh, I created a router.refresh() after fetching the data and before returning it.

      const { data: dataEvent, isLoading: isLoadingEvent } = useQuery({
    queryKey: ["edit", id],
    queryFn: async () => {
      const res = await getDataById(id);
      router.refresh()
      return res
    },
  });

    This thing works


  2. 0

    When using defaultValue, it only affects the first render. Therefore, avoid updating the value directly to defaultValue. Instead, utilize setValue or reset to update the data.

    Example with setValue:

      useEffect(() => {
     if(dataEvent?.meetingTypeOption) {
        form.setValue('meetingTypeOption', dataEvent?.meetingTypeOption)
     }
  }, [dataEvent])
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search