How to register 'react-bootstrap-typeahead' component using React 'useForm' hook?

Question

I'm building a simple html form using "react-hook-form" library: https://react-hook-form.com/

I've incorporated "react-bootstrap-typeahead" into the html form but haven't been able to register this component with 'useForm' hook. Hence, "react-bootstrap-typeahead" input data is ignored during onSubmit.

"react-bootstrap-typeahead" doesn't provide a "name" prop which makes it difficult to register the component.

I've read the 'useForm' documentation on the different options for registering this type of components but still don't understand how to achieve this: https://react-hook-form.com/get-started#Registerfields

Does anybody have faced such challenge before?

It would be great to see a working example to get a better idea on how to implement "react-bootstrap-typeahead" + "react-hook-form" in my application. Thanks!

Here's my sample code:

import useForm from 'react-hook-form';
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';

const myForm = (props) => {

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

    const onSubmit = data => {
          // api post request with form data
        })
    };

    const mydata = [ "one", "two", "three" ];

   return (
   <>
   <form onSubmit={handleSubmit(onSubmit)} >
   <div className="form-group">

   {/* Here I'm registering text input using ref: */}

   <input type="text" className="form-control" name="name" ref={register({ required: true })} />
                                        
   </div>
                                                             
   <div className="form-group mb-0">

   {/* How can I register the below component with useForm? */}
   <Typeahead
      id="multiple-typeahead"
      clearButton
      multiple
      options={mydata}
   />
   </div>
   <button type="submit">Save</button>
   </form>
   </>
  );
}

Have you looked at the Controller component from react-hook-form? Specifically, using the render props approach and manually applying props to the Typeahead component: react-hook-form.com/get-started#IntegratingControlledInputs — ericgio
@ericgio Thanks! This definitely pointed to the right direction. The component is really cool and I'm finding it very useful. Changing the topic just a bit but still Typeahead related... What would you suggest for using "selected" prop If I'm planning to populate "options" with REST api response? I tried both the regular and the Async component but using "selected" property seems to not update the state properly. i.e. Selected data is displayed in Typeahead but once I select another data it doesn't show in the input. This works perfectly fine with static data file but not api response. Cheers! — haizendaizen
I'm not quite sure what you mean. Would be best to ask a new question with all the relevant details. — ericgio

haizendaizen haizendaizen · Accepted Answer · 2020-08-18T03:42:03

This is how i was able to register the component:

import useForm from 'react-hook-form';
import { useForm, Controller } from "react-hook-form";
import 'react-bootstrap-typeahead/css/Typeahead.css';

const myForm = (props) => {

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

    const onSubmit = data => {
          // api post request with form data
        })
    };

    const mydata = [ "one", "two", "three" ];

   return (
   <>
   <form onSubmit={handleSubmit(onSubmit)} >
   <div className="form-group">
   <input type="text" className="form-control" name="name" ref={register({ required: true })} />
   </div>
                                                             
   <div className="form-group mb-0">
<Controller
   as={Typeahead}
             control={control}
             name="typeahead_component"
             rules={{ required: true }}
             id="multiple-typeahead"
             clearButton
             multiple
             options={mydata}
             defaultValue=""
/>
   </div>
   <button type="submit">Save</button>
   </form>
   </>
  );
}

How to register 'react-bootstrap-typeahead' component using React 'useForm' hook?

1 Answers