React-select & React-hook-form Controller issue

Question

I'm trying to implement register from react-hook-forms for react-select but in order to do that I need to make use of Controller from react-hook-forms but when I use Controller then my Select Component bombs out with

TypeError: methods is null

On useController.ts (Which is the package controller file itself)

I don't know why I am getting this and at this point, I would appreciate some assistance in resolving this issue. I've spent hours debugging and changing and looking at alternative solutions but nothing works

My code for my react-select component:

import PropTypes from 'prop-types';
import Select from 'react-select';
import { Controller } from 'react-hook-form';
import { Container, SelectHeader, Validation } from './SelectSearch.style';

const SelectSearch = ({
  name,
  label,
  header,
  placeholder,
  options,
  isClearable,
  isSearchable,
  isDisabled,
  isLoading,
  isRequired,
  error,
  margin,
  validationLabel,
  control,
}) => {
 

  return (
    <Container margin={margin}>
      <SelectHeader>{header}</SelectHeader>
      <Controller
        as={
          <Select
            label={label}
            name={name}
            placeholder={placeholder}
            options={options}
            isClearable={isClearable}
            isSearchable={isSearchable}
            isDisabled={isDisabled}
            isLoading={isLoading}
            isRequired={isRequired}
            styles={style}
          />
        }
        control={control}
        name={name}
        rules={{ required: true }}
        defaultValue={null}
      />

      {!error && validationLabel && <Validation>{validationLabel}</Validation>}
      <div>{error}</div>
    </Container>
  );
};

I see as property for the first time. Should you use render property as a render property pattern instead? — Pavlo Zhukov
– Pavlo Zhukov, Commented Mar 15, 2022 at 19:44

Gabriel Brito · Accepted Answer · 2022-05-06 22:19:54Z

2

The error message could be better but this error happens when you are using useForm and forgetting to use the context form provider

import React from "react"
import { useForm, FormProvider } from "react-hook-form"

const MyFormComponent = () => {
  const methods = useForm()

  return (
    <FormProvider {...methods} > // pass all methods into the context
      ...
    </FormProvider>

  )
}

answered May 6, 2022 at 22:19

Gabriel Brito

1,2162 gold badges19 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-select & React-hook-form Controller issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related