I am new to Ionic. I have created a simple form which has a Title and Message field by react-hook-form Controller. So that an error occured in "as"

Find the Image Here

Error Message in CMD

import * as  React from "react";
import { IonCard, IonCardContent, IonCardHeader, IonContent, IonHeader, IonTextarea, IonInput, IonLabel, IonPage, IonItem, IonTitle, IonToolbar, IonButton } from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
import { Controller, useForm } from "react-hook-form";

const Home: React.FC = () => {
  
  const initialValues = {
    title: "",
    body: ""
  }

  const { control, reset, handleSubmit, formState} = useForm({
    defaultValues: initialValues
  });

  const onSubmit = (data: any) => {
    alert(JSON.stringify(data, null, 2));
  }

  const resetForm = () => {
    reset(initialValues);
  }

  // const renderErrorMessage = (_key : string ) => {
  //   let theErrors = (errors as any)[_key];
  //   return <span>theErrors.message || "This Is A Required Field"</span>
  // } 
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle size="large">Form Test - React Hook Form</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonCard>
          <IonCardHeader>Test Input Form</IonCardHeader>
        </IonCard>

        <IonCardContent>
          <form onSubmit={handleSubmit(onSubmit)}>
            <IonItem>
              <IonLabel>Title</IonLabel>
              <Controller
                as = {IonInput}
                control={control}
                onChangeName="onIonChange"
                onChange={(selected:any) => {
                  return selected.detail.value;
                }}
                name="title"
                rules={{
                  required: true,
                  minLength: { value: 4, message: "Must be 4 chars long" }
                }}
              />
              
            </IonItem>
                {/* {errors.title ? renderErrorMessage("title") : null} */}
            <IonItem>
              <IonLabel>Body</IonLabel>
              <Controller
                as = {<IonTextarea rows={5}></IonTextarea>}
                control={control}
                onChangeName="onIonChange"
                onChange={(selected:any) => {
                  return selected.detail.value;
                }}
                name="body"
                rules={{
                  required: true,
                  minLength: { value: 10, message: "Must be 10 chars long" }
                }}
              />
              
            </IonItem>
            {/* {errors.body ? renderErrorMessage("body") : null} */}
            <IonButton type="submit">SAVE</IonButton>
            <IonButton onClick={() => resetForm()}>Reset Form</IonButton>
          </form>
        </IonCardContent>

      </IonContent>
    </IonPage>
  );
};

export default Home;

Visual Studio Code display the error line below the as keyword in Controller Tag while defining the input field. I have installed react-hook-form library

Ionic:

Ionic CLI : 6.18.1 Ionic Framework : @ionic/react 6.0.1

Capacitor:

Capacitor CLI : 3.3.3 @capacitor/android : not installed @capacitor/core : 3.3.3 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 1.5.0

System:

NodeJS : v16.13.1 (C:\Program Files\nodejs\node.exe) npm : 8.1.2 OS : Windows 10

CodePudding user response：

The as props have been removed in react-hook-form v7, that's you get this error. (Supposing you're using the v7). You've to use the render prop.