How to pass {...rest} props in react material text field?-CodePudding

I am using material textfield inside a wrapper component and passing rest of the props ex. {...otherprops} in js file it works fine but in typescript it is giving me error.

const TextFieldWrapper = (props: FormFieldProps) => {
    const {name, type, valid,touched, errorMessage, ...otherprops} = props;  
    
  return (
    <>
      <TextField name={name} type={type} variant= 'outlined' {...otherprops}/>
      {!valid && touched && <ErrorMessage>{errorMessage}</ErrorMessage>}
    </>
  );
}

Error:

I resolved this error using inputProps but the props are not working when I am runing the application. I did this:

const TextFieldWrapper = (props: FormFieldProps) => {
    const {name, type, valid,touched, errorMessage, ...otherprops} = props; 
    console.log(props);

const inputProps = {
  otherprops:{...otherprops}
};    
    
  return (
    <>
      <TextField name={name} type={type} variant= 'outlined'
       inputProps={inputProps} />
      {!valid && touched && <ErrorMessage>{errorMessage}</ErrorMessage>}
    </>
  );
}

Can someone tell me how to pass the remaining props inside material form element? I must be doing something wrong and spending a lot of time trying to fix it.

CodePudding user response：

Passing "inputProps" is not the same as passing the rest of the Textfield props with a spread operator.

"inputProps" are part of the advanced configuration of the Textfield component, check the docs. And are intended to only be used to change the "input" that the Textfield beholds.

"otherProps", in your code, are a subset of the top level props that the Textfield component exposes, one of them being "inputProps".

If you want typescript to understand what type of props you are passing to the component, then you need to properly type "otherProps".

Right now the type for the props of the Textfield component is TextFieldProps, so you would need to import that type and use it to tell typescript that you are passing the correct props.

You will even get compiler help when adding the type!

CodePudding user response：

@Lautaro, Thanks for enlightening me. Here is the working code:

const TextFieldWrapper = (props: FormFieldProps) => {
    const {name, type, valid,touched, errorMessage, ...otherprops} = props; 
  return (
    <>
      <TextField name={name} type={type} variant= 'outlined' {...otherprops} />
      {!valid && touched && <ErrorMessage>{errorMessage}</ErrorMessage>}
    </>
  );
}

export type InputProps = {
    className?: string
    errorMessage: string
    maxLength?: number
    minLength?: number
    name?: string
    id?: string
    type?: string
    touched: boolean 
    placeholder: string
    fieldConfig?: FieldConfig
    // onBlur?:(event:React.ChangeEvent<HTMLInputElement>,field:Field,index:number)=>void
    // onChange?:(event:React.ChangeEvent<HTMLInputElement>,field:Field,index:number)=>void
    
    // required: boolean
    // valid: boolean
    // value: string
    
    // label?: string
    [key: string]: unknown; //This is the line I have added
    
}

I just added this [key: string]: unknown; to resolve the issue.