CODEWITHSUNDEEP
typescriptreact-bootstrap-typeahead
DeltaTango
DeltaTango

Reputation: 891

react-bootstrap-typeahead extended custom component, typeahead props requiring 1 argument

I am trying to make a custom typeahead component which has additional props to generate a field with a from group, label, etc. using my library I have developed.

When I use the code below, Typeahead props is underlined in red, and I get the error: Generic type 'TypeaheadProps' requires 1 argument. I am not sure what that argument should be?

import React from "react";
import FormValidator from "../../utilities/FormValidator";
import {observer} from "mobx-react";
import {
    FormFeedback,
    FormGroup, FormText, Label
} from "reactstrap";
import {Typeahead, TypeaheadProps} from "react-bootstrap-typeahead";

interface IFormTypeaheadProps extends TypeaheadProps{
    // the form validation class
    formValidator: FormValidator,
    // the name of the property to edit
    propName: string,
    // the keyto use to access any error message in formValidator.formErrors
    errorKey?: string,
    // the label for the text field
    label?: string,
    // any data prop which overrides default formValidator.dataStore.data prop
    data?: any,
    // a caption which will show with a <FormText /> element
    caption?: string
}

const FormTypeahead: React.FC<IFormTypeaheadProps> = ({ formValidator, propName, data, label, caption, errorKey, ...atts }) => {

    // any validation error message
    const eKey = errorKey || propName;

    return (
        <FormGroup>
            {label ? <Label>{label}</Label> : null}
            <Typeahead
                isInvalid={typeof formValidator.formErrors[eKey] !=='undefined'}
                {...atts} />
            {typeof formValidator.formErrors[eKey] !== 'undefined'
            ? (
                <FormFeedback>{formValidator.formErrors[eKey]}</FormFeedback>
            ) : null}
            {caption ? <FormText>{caption}</FormText> : null}
        </FormGroup>
    )
}

export default observer(FormTypeahead);

enter image description here

It SEEMS that the argument should be the interface of the option being passed in the options prop. For now, I have used "any" until I confirm this.

Upvotes: 0

Views: 526

Answers (1)

Sam
Sam

Reputation: 1239

Here an example. Basically, if you want to add any extra parameter which is not part of your interface, you can declare it like this.

type customTypeAheadModel = TypeaheadModel & {
  UserId: string
}

interface IFormTypeaheadProps extends TypeaheadProps<customTypeAheadModel>{
  // the form validation class
 formValidator: FormValidator,
  // the name of the property to edit
  propName: string,
  // the keyto use to access any error message in formValidator.formErrors
  errorKey?: string,
  // the label for the text field
  label?: string,
  // any data prop which overrides default formValidator.dataStore.data prop
  data?: any,
  // a caption which will show with a <FormText /> element
  caption?: string
}

Upvotes: 1

Related Questions