From 02b7a10433ea2d3bdff405597cc496fe6248808c Mon Sep 17 00:00:00 2001
From: Aman Bansal <khanakia@gmail.com>
Date: Thu, 22 Jun 2023 12:55:54 +0530
Subject: [PATCH 1/2] Update react-hooks-forms.md
React hook form example was not working as code was outdated so fixed it
---
docs/3.1.x/react-hooks-forms.md | 25 +++++++++++++++----------
1 file changed, 15 insertions(+), 10 deletions(-)
diff --git a/docs/3.1.x/react-hooks-forms.md b/docs/3.1.x/react-hooks-forms.md
index f4efec13c..7e4e0e8e6 100644
--- a/docs/3.1.x/react-hooks-forms.md
+++ b/docs/3.1.x/react-hooks-forms.md
@@ -19,8 +19,13 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookExample() {
- const { control, handleSubmit, errors } = useForm();
- const onSubmit = (data) => {
+ const {
+ control,
+ handleSubmit,
+ formState: {errors},
+ } = useForm();
+
+ const onSubmit = (data: any) => {
console.log('submiting with ', data);
};
return (
@@ -29,16 +34,16 @@ function FormHookExample() {
<FormControl.Label>First Name</FormControl.Label>
<Controller
control={control}
- render={({ onChange, onBlur, value }) => (
+ render={({field: {onChange, onBlur, value}}) => (
<Input
onBlur={onBlur}
placeholder="John"
- onChangeText={(val) => onChange(val)}
+ onChangeText={val => onChange(val)}
value={value}
/>
)}
name="firstName"
- rules={{ required: 'Field is required', minLength: 3 }}
+ rules={{required: 'Field is required', minLength: 3}}
defaultValue=""
/>
<FormControl.ErrorMessage>
@@ -49,11 +54,11 @@ function FormHookExample() {
<FormControl.Label>Last Name</FormControl.Label>
<Controller
control={control}
- render={({ onChange, onBlur, value }) => (
+ render={({field: {onChange, onBlur, value}}) => (
<Input
onBlur={onBlur}
placeholder="Doe"
- onChangeText={(val) => onChange(val)}
+ onChangeText={val => onChange(val)}
value={value}
/>
)}
@@ -68,16 +73,16 @@ function FormHookExample() {
<FormControl.Label>Age</FormControl.Label>
<Controller
control={control}
- render={({ onChange, onBlur, value }) => (
+ render={({field: {onChange, onBlur, value}}) => (
<Input
onBlur={onBlur}
placeholder="24"
- onChangeText={(val) => onChange(val)}
+ onChangeText={val => onChange(val)}
value={value}
/>
)}
name="age"
- rules={{ min: 18, required: 'Age is required' }}
+ rules={{min: 18, required: 'Age is required'}}
defaultValue=""
/>
<FormControl.ErrorMessage>
From 3ae440aa4e3ddafd4d2be4855cc13a703b19fbc7 Mon Sep 17 00:00:00 2001
From: Aman Bansal <khanakia@gmail.com>
Date: Thu, 22 Jun 2023 13:04:16 +0530
Subject: [PATCH 2/2] Update react-hooks-forms.md
React hook form example was not working as code was outdated so fixed it
---
docs/3.1.x/react-hooks-forms.md | 24 +++++++++++-------------
1 file changed, 11 insertions(+), 13 deletions(-)
diff --git a/docs/3.1.x/react-hooks-forms.md b/docs/3.1.x/react-hooks-forms.md
index 7e4e0e8e6..9d7ec9130 100644
--- a/docs/3.1.x/react-hooks-forms.md
+++ b/docs/3.1.x/react-hooks-forms.md
@@ -19,11 +19,7 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookExample() {
- const {
- control,
- handleSubmit,
- formState: {errors},
- } = useForm();
+ const { control, handleSubmit, formState: {errors} } = useForm();
const onSubmit = (data: any) => {
console.log('submiting with ', data);
@@ -88,7 +84,9 @@ function FormHookExample() {
<FormControl.ErrorMessage>
{errors.age?.type === 'required'
? errors.age?.message
- : errors.age?.type === 'min' ?? 'Under age'}
+ : errors.age?.type == 'min'
+ ? 'Under age'
+ : null}
</FormControl.ErrorMessage>
</FormControl>
<Button onPress={handleSubmit(onSubmit)} colorScheme="pink">
@@ -123,7 +121,7 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookCheckboxExample() {
- const { control, handleSubmit, errors } = useForm();
+ const { control, handleSubmit, formState: {errors} } = useForm();
const onSubmit = (data) => {
console.log('submiting with ', data);
};
@@ -235,7 +233,7 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookSelectExample() {
- const { control, handleSubmit, errors } = useForm();
+ const { control, handleSubmit, formState: {errors} } = useForm();
const onSubmit = (data) => {
console.log('submiting with ', data);
};
@@ -303,7 +301,7 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookSliderExample() {
- const { control, handleSubmit, errors } = useForm();
+ const { control, handleSubmit, formState: {errors} } = useForm();
const onSubmit = (data) => {
console.log('submiting with ', data);
};
@@ -358,7 +356,7 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookTextareaExample() {
- const { control, handleSubmit, errors } = useForm();
+ const { control, handleSubmit, formState: {errors} } = useForm();
const onSubmit = (data) => {
console.log('submiting with ', data);
};
@@ -412,7 +410,7 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookSwitchExample() {
- const { control, handleSubmit, errors } = useForm();
+ const { control, handleSubmit, formState: {errors} } = useForm();
const onSubmit = (data) => {
console.log('submiting with ', data);
};
@@ -469,7 +467,7 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookNumberInputExample() {
- const { control, handleSubmit, errors } = useForm();
+ const { control, handleSubmit, formState: {errors} } = useForm();
const onSubmit = (data) => {
console.log('submiting with ', data);
};
@@ -529,7 +527,7 @@ import React from 'react';
import { useForm, Controller } from 'react-hook-form';
function FormHookPinInputExample() {
- const { control, handleSubmit, errors } = useForm();
+ const { control, handleSubmit, formState: {errors} } = useForm();
const onSubmit = (data) => {
console.log('submiting with ', data);
};