Today I was developing a childrens math application and I was looping an object.

This is the code where the error was being generated from:

interface propertyRow {
  title: string;
  min: {
    value:number,
    placeholder:string,
    type:string,

  };
  max: {
    value:number,
    placeholder:string,
    type: string,
  };
}
  const propertyRows: propertyRow[] = [
    {
      title: "Top Number Range",
      min: {
        value: 0,
        placeholder: "Min Number",
        type: "number"
      },
      max: {
        value: 14,
        placeholder: "Max Number",
        type: "number"
      },
    }

  ];
          {propertyRows.map((row, i) => {
              return (
                
                <IonRow  key={i}>
                  {console.log('LINE 105', row)}
                <IonCol>
                  <IonText>{row.title}</IonText>
                </IonCol>
                <IonCol>
                  <IonInput type={row.min.type} value={row.min.value} placeholder={row.min.placeholder}></IonInput>
                </IonCol>
                <IonCol>
                <IonInput type={row.min.type} value={row.max.value} placeholder={row.max.placeholder}></IonInput>
                </IonCol>
              </IonRow>

              );
            })}

the input type was showing me the error.

One of the dynamic properties I need to build the form was to assign an input field the type. I had some options like "number", "text" etc.. but I kept getting the following error in the terminal:

[react-scripts] TS2322: Type 'string' is not assignable to type 'TextFieldTypes | undefined'.

on my visual code the error said something similar:

Type 'string' is not assignable to type 'TextFieldTypes | undefined'.ts(2322)
components.d.ts(4806, 9): The expected type comes from property 'type' which is declared here on type 'IntrinsicAttributes & IonInput & Pick<HTMLAttributes<HTMLIonInputElement>, "hidden" | "dir" | "slot" | ... 249 more ... | "onTransitionEndCapture"> & StyleReactProps & RefAttributes<...>'
(JSX attribute) LocalJSX.IonInput["type"]?: TextFieldTypes | undefined

The type of control to display. The default type is text.

View Problem
No quick fixes available

I googled relentlessly but to no avail. I was disappointed that I could not find the answer. I found some people had the same problem and the examples they showed was for angular and not react.

These are some of the resources I found:

  • https://forum.ionicframework.com/t/ionic-adding-form-fields-dynamically/70367
  • https://forum.ionicframework.com/t/dynamic-adding-new-input-field/117534
  • https://stackoverflow.com/questions/55105869/how-to-add-dynamic-input-fields-into-an-array-in-ionic-4
  • https://stackoverflow.com/questions/37978528/typescript-type-string-is-not-assignable-to-type
  • https://stackoverflow.com/questions/37674073/react-changing-input-type-via-event
  • https://forum.ionicframework.com/t/ioninput-type-file/205203
  • https://stackoverflow.com/questions/32765239/typescript-1-6-ionic-error-ts2322-build-type-is-not-assignable-to-type-iactions
  • https://stackoverflow.com/questions/55701975/getting-ts-type-string-is-not-assignable-to-type-string
  • https://flutterq.com/solved-typescript-type-string-is-not-assignable-to-type/
  • https://stackoverflow.com/questions/54951404/error-ts2322-type-string-is-not-assignable-to-type-string
  • https://github.com/react-hook-form/react-hook-form/issues/418

Unfortunately, non of these solutions work. The solutions was simple, all you I needed to change was  type to any

Solution:

interface propertyRow {
  title: string;
  min: {
    value:number,
    placeholder:string,
    type:any,

  };
  max: {
    value:number,
    placeholder:string,
    type: any,
  };
}

Hope that helps.