Next js Custom Field Component With React Form Hook

Hey everyone, I need help! I'm trying to create my own custom Field Component in Next.js with the React Hook Form library for form validation. I'm a bit confused about how to use Controller inside my Field Component.
Here is my code

This is the parent component. Currently, I am using Controller in the parent component. It works, but I want to use it in the child component.

  <Controller
                name="customTemperature"
                control={control}
                render={({ field }) => (
                  <Field
                    label="Custom Temperature"
                    className="appearance-none"
                    type="number"
                    error={errors.customTemperature?.message}
                    {...field}
                  />
                )}
              />

  <Controller
                name="customTemperature"
                control={control}
                render={({ field }) => (
                  <Field
                    label="Custom Temperature"
                    className="appearance-none"
                    type="number"
                    error={errors.customTemperature?.message}
                    {...field}
                  />
                )}
              />

KP-C

Kevin Powell - Community•2y ago

Samir Ghataney

Next js Custom Field Component With React Form Hook

  <Controller
                name="customTemperature"
                control={control}
                render={({ field }) => (
                  <Field
                    label="Custom Temperature"
                    className="appearance-none"
                    type="number"
                    error={errors.customTemperature?.message}
                    {...field}
                  />
                )}
              />

  <Controller
                name="customTemperature"
                control={control}
                render={({ field }) => (
                  <Field
                    label="Custom Temperature"
                    className="appearance-none"
                    type="number"
                    error={errors.customTemperature?.message}
                    {...field}
                  />
                )}
              />

Next js Custom Field Component With React Form Hook

Similar Threads

Next js Custom Field Component With React Form Hook

Similar Threads

Similar Threads

Similar Threads