TypeError: props.render is not a function (React hook form)

user_15362326 0
Viewed 12948

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;

reactjs javascript
7 Answers

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

user_156355740

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:

Unchanged:

import { useForm, Controller } from "react-hook-form";
import Select from "react-select";

From:

<Controller
  name="languages"
  control={control}
  rules={{ required: true }}
  as={Select}
  options={props.languageOptionsToSelect}
  defaultValue={props.languageDefaultValueToSelect}
  isMulti
/>;

To:

<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.

user_28012420

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}
          />
user_93646150

Try this one!

<Controller
  render={({ field }) => <TextField {...field} />}
  name={name}
  control={control}
  label={label}
  fullWidth
  required={required}
/>
user_106954200

Add render as a prop in the Controller Component. Refer to the docs here

user_107732060 
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()

    return (
        <Grid item xs={12} sm={6}>
            <Controller
                control={control}
                name={name}
                render = {({ field})=> (
                    <TextField
                        fullWidth
                        label={label}
                        required
                    />
                )}
            />
        </Grid>
    )
}

export default FormInput
user_117628070

It now requires a render props, try this on MUI:

<Controller
  render={({ field }) => ( 
  <TextField {...field} label={label} required={required}/>)}
  control={control}
  fullWidth
  name={name}
/>
user_134070990
Related