CODEWITHSUNDEEP
reactjstypescriptintrinsicattributes
AVT
AVT

Reputation: 45

...otherProps in func React with TypeScript

I have this part of code:

<InputComponent
id="email"
name={formik.values.email}
type="text"
formik={formik}
className="signInInput"
disabled/>

And part with disabled and className have a mistake: Property "disabled" doesn't exist in type "IntrinsicAttributes & { id: string; name: string; type: string; formik: any; className: string;}"

InputComponent looks like:

interface ForProps{ 
    id: string, 
    name: string, 
    type: string, 
    formik: any,
    otherProps?: React.HTMLAttributes<HTMLInputElement>}

export default function InputComponent({id, name, type, formik, ..otherProps}: 
ForProps) {
    return(
        <TextField
        id={id}
        type={type}
        value={formik.values[name]}
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        error={formik.touched[name] && !!formik.errors[name]}
        {..otherProps}/>
    )
}

How can I involve otherProps in this component with TS and without mistakes?

Upvotes: 1

Views: 192

Answers (1)

starball
starball

Reputation: 50810

Solution moved from @AlinaVoytovich's question post.

You should initialized your otherPeops in this way(other attributes will stick to your ..otherProps if you write: suggestSomeAttribute ?: someType):

interface ForProps{ 
    id: string, 
    name: string, 
    type: string, 
    formik: any,
    className?: string,
    disabled?: boolean}

export default function InputComponent({id, name, type, formik, ...otherProps}: ForProps)

Upvotes: 0

Related Questions