I am passing methods as a prop in this form I am making with react-hook-form. Its giving me (TypeError: props.render is not a function) when Controller is added in from react-hook-form. I cannot find any solutions online so any help is appreciated.
import { useForm, FormProvider } from 'react-hook-form';
import FormInput from './CustomTextField';
const AddressForm = () => {
const methods = useForm();
return (
<>
<FormProvider {...methods}>
<form onSubmit=' '>
<Grid container spacing={3}>
<FormInput required name='firstName' label='First name' />
</Grid>
</form>
</FormProvider>
</>
);
};
import { useFormContext, Controller } from 'react-hook-form';
const FormInput = ({ name, label, required }) => {
const { control } = useFormContext();
return (
<>
<Controller
as={TextField}
name={name}
control={control}
label={label}
fullWidth
required={required}
/>
<>
);
};
export default FormInput;
Was stuck in somewhat similar problem, you can try following changes in FormInput function:
import React from 'react';
import { TextField, Grid } from '@material-ui/core';
import { useFormContext, Controller } from 'react-hook-form';
const FormInput = ({ name, label, required}) => {
const { control } = useFormContext();
const isError = false;
return (
<>
<Controller
control={control}
name={name}
render = {({ field})=> (
<TextField
fullWidth
label={label}
required
/>
)}
/>
</>
);
}
export default FormInput;
hope this helps, else you can go through the docs
This problem is arising either because you update your react-hook-form or new to react-hook-form
You just need to use render prop in Controller component
<Controller
render={({ field }) => (
<input
onChange={(e) => field.onChange(transform.output(e))}
value={transform.input(field.value)}
/>
)}
/>
or if you are using a third party Form library
import { Input, Select, MenuItem } from "@material-ui/core";
<Controller
render={({ field }) => (
<Select {...field}>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
</Select>
)}
control={control}
name="select"
defaultValue={10}
/>
I had this problem (TypeError: props.render is not a function) with react-hook-form + react-select when I tried to reuse the same Controller component from an old project, and I fixed this way:
import { useForm, Controller } from "react-hook-form";
import Select from "react-select";
<Controller
name="languages"
control={control}
rules={{ required: true }}
as={Select}
options={props.languageOptionsToSelect}
defaultValue={props.languageDefaultValueToSelect}
isMulti
/>;
<Controller
name="languages"
control={control}
rules={{ required: true }}
render={({ field }) => (
<Select
{...field}
options={props.languageOptionsToSelect}
defaultValue={props.languageDefaultValueToSelect}
isMulti
/>
)}
/>;
It seems render prop in Controller component is required now.
Try this one!
<Controller
render={({ field }) => <TextField {...field} />}
name={name}
control={control}
label={label}
fullWidth
required={required}
/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With