React Hook Form integration in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main hook from React Hook Form.

React Native

import { [1] } from 'react-hook-form';

Drag options to blanks, or click blank then click option'

AuseForm

BuseEffect

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated React hooks like useState or useEffect.

Forgetting to import useForm from react-hook-form.

The useForm hook is the main hook provided by React Hook Form to manage form state.

2fill in blank

medium

Complete the code to initialize the form methods using React Hook Form.

React Native

const { register, handleSubmit, formState: { errors } } = [1]();

Drag options to blanks, or click blank then click option'

AuseEffect

BuseForm

CuseState

DuseContext

Attempts:

3 left

💡 Hint

Common Mistakes

Using useState instead of useForm.

Not calling the hook as a function.

The useForm() hook returns methods like register, handleSubmit, and formState to manage the form.

3fill in blank

hard

Fix the error in the code to register a TextInput with React Hook Form.

React Native

<TextInput {...[1]('email')} placeholder="Email" />

Drag options to blanks, or click blank then click option'

AhandleSubmit

BformState

Cerrors

Dregister

Attempts:

3 left

💡 Hint

Common Mistakes

Using handleSubmit instead of register for inputs.

Trying to spread errors or formState instead of register.

The register function connects the input to React Hook Form.

4fill in blank

hard

Fill both blanks to handle form submission and display an alert with form data.

React Native

const onSubmit = [1](data => {
  alert(JSON.stringify(data));
});

<Button title="Submit" onPress=[2] />

Drag options to blanks, or click blank then click option'

AhandleSubmit

BonSubmit

Cregister

Derrors

Attempts:

3 left

💡 Hint

Common Mistakes

Using register instead of handleSubmit for submission.

Passing handleSubmit directly to onPress without wrapping.

handleSubmit wraps the onSubmit function to process form data. The button's onPress calls onSubmit.

5fill in blank

hard

Fill all three blanks to create a controlled input with validation using React Hook Form's Controller.

React Native

import { Controller, useForm } from 'react-hook-form';

const { control, handleSubmit } = useForm();

<Controller
  control={control}
  name="username"
  rules={{ required: true }}
  render={({ field: { onChange, onBlur, value } }) => (
    <TextInput
      onBlur=[1]
      onChangeText=[2]
      value=[3]
      placeholder="Username"
    />
  )}
/>

Drag options to blanks, or click blank then click option'

AonBlur

BonChange

Cvalue

Dregister

Attempts:

3 left

💡 Hint

Common Mistakes

Using register instead of Controller for controlled inputs.

Mixing up onChange and onChangeText props.

The Controller passes onBlur, onChange, and value to the input to control it properly.