Controller does not working for MUI Select and React Hook Form. TypeError: props.render is not a function

user_16105421 0
Viewed 434

I have parent and child components. In the child component, I have a 'select' and 'textfield'. I need to configure validation for this select - "Required". Textfield works, but select does not. I could not do it and searched to solve this and saw "Controller". But when I send control (useForm) as a prop to my child component, the app does not work and my error is TypeError: props.render is not a function

Parent component:

  const { register, handleSubmit, control, formState: { errors }} = useForm();

  <AddProductInfo register={register} control={control} errors={errors} />

Child component:

         <FormControl fullWidth>
          <Typography variant={"span"} className={styles.select}>
            Category
          </Typography>
          <Controller
            as={
              <Select
                value={addProductData.category}
                onChange={handleChange}
                // {...register("category", {
                //   required: "Choose one of them",
                // })}
                // error={Boolean(errors.category)}
              >
                {categoriesData.map((data, key) => (
                  <MenuItem key={key} value={data.id}>
                    {data.name.az}
                  </MenuItem>
                ))}
              </Select>
            }
            name={"category"}
            control={control}
          ></Controller>

          <FormHelperText error variant="filled">
            {errors.category?.message}
          </FormHelperText>
        </FormControl>
react-hook-form material-ui reactjs controller
1 Answers

I solved. The right code

from

  <Controller as={
     <Select>
     </Select>
   }
  />

to

  <Controller render={({ field }) => (
     <Select {...field}>
     </Select>  
     )} 
  />

Like this

       <Controller
            render={({ field }) => (
              <Select
                {...field}
              >
                {categoriesData.map((data, key) => (
                  <MenuItem key={key} value={data.id}>
                    {data.name.az}
                  </MenuItem>
                ))}
              </Select>
            )}
            name={"category"}
            control={control}
          ></Controller>
user_161054210
Related