реакции- bootstrap как использовать пользовательский компонент управления формой

Question

Мне нужно добавить выбранный ввод в мою форму, но вариантов слишком много, поэтому способ сделать это по умолчанию выглядит ужасно (

<Form.Control as="select">
    {props.options.map(
        (o) => <option>{o}</option>
    )}
</Form.Control>

Так что я решил использовать react-bootstrap-typeahead потому что он уже используется в моем проекте и поддерживает поиск. Однако в этом случае он не работает должным образом.

<Form>
    <Form.Group>
        <Form.Label>Provider</Form.Label>
        <Form.Control
            as={Typeahead}
            id="id"
            options={props.options}
         />
    </Form.Group>
</Form>

Это выглядит так:

Возможно, я сделал это не правильно, но я не могу понять, как это сделать по-другому (

Answer 1

https://react-bootstrap.github.io/components/forms/#form -контроль-реквизит

У терма есть реквизит "как". См. Ниже пример.

export default function Input(props) { 

 const CustomFormControl = React.forwardRef(({ children, onChange}, ref) => (
    <>
     <p>Insert your elements for yout form</p>
     <p>{props.test}</p>
    </>
  ));

return (
    <>
        <Form.Control
        as = {CustomFormControl}
        test = {"hellow world"}
        /** and here u can inser the props you need **/
        />
    </>

}