Using React Hook Form v6+ with Ionic React Components - Update
Tags: webdev, react, ionic, javascript
Published: 2020-07-17 18:19:30

####[🔆Click Here for Ionic Framework ReactJS and VueJS Tips/Tutorials?🔆](https://buff.ly/35bAMIf) 

This is a quick post showing quickly how to make latest version of [React Hook Form](https://react-hook-form.com/api#Controller) work with [Ionic Framework](www.ionicframework.com) ReactJS Components.

The previous post example will only work on older versions of the form library.

This is based on the `Controller` API discussed here in the documentation - https://react-hook-form.com/api#Controller

```react
const App: React.FunctionComponent = () => {
  const { handleSubmit, control } = useForm();

  /**
   *
   * @param data
   */
  const onSubmit = (data: any) => {
    debugger;
    alert(JSON.stringify(data, null, 2));
  };

  return (
    <IonApp>
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start">
              <IonBackButton />
            </IonButtons>
            <IonTitle>Detail</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <p>Details</p>
          <form onSubmit={handleSubmit(data => console.log(data))}>
            <IonItem>
              <IonLabel>Gender</IonLabel>
              <Controller
                render={({ onChange, onBlur, value }) => (
                  <IonSelect placeholder="Select One" onIonChange={onChange}>
                    <IonSelectOption value="FEMALE">Female</IonSelectOption>
                    <IonSelectOption value="MALE">Male</IonSelectOption>
                  </IonSelect>
                )}
                control={control}
                name="gender"
                rules={{ required: true }}
              />
            </IonItem>
            <IonItem>
              <IonLabel>Email</IonLabel>
              <Controller
                render={({ onChange, onBlur, value }) => (<IonInput onIonChange={onChange}/>)}
                control={control}
                name="email"
                rules={{
                  required: true,
                  pattern: {
                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                    message: "invalid email address"
                  }
                }}
              />
            </IonItem>
            <IonItem>
              <Controller
                render={({ onChange, onBlur, value }) => (
                  <IonRange
                    min={-200}
                    max={200}
                    color="secondary"
                    onIonChange={onChange}
                  >
                    <IonLabel slot="start">-200</IonLabel>
                    <IonLabel slot="end">200</IonLabel>
                  </IonRange>
                )}
                control={control}
                name="rangeInfo"
                rules={{ required: true }}
              />
            </IonItem>
            <IonButton type="submit">submit</IonButton>
          </form>
        </IonContent>
      </IonPage>
    </IonApp>
  );
};
```
### Updated Example Source Code From Stackblitz
{% stackblitz  ionic-react-hook-form %}

### Original Video Showing the Use of React Hook Form
{% youtube 5MsXpmh3Un8 %}