Creating recursive and dynamic forms with React Hook Form and TypeScript

May 16, 2022

React Hook Form is a popular library that helps us deal with forms and keep their code consistent across the whole application. In this article, we look into how to allow the user to shape the form to some extent and create data structures that are recursive. In the end, we get the following form:

If you want to learn the basics of React Hook Form instead, check out Building forms with React Hook Form and TypeScript

Dealing with arrays of inputs

Let’s start with defining an interface that describes the form values.

FriendsFormValues.tsx

interface FriendsFormValues {

friends: { name: string }[];

}

export default FriendsFormValues;

Also, let’s create the basics of our form that uses the <FormProvider /> component. Thanks to doing that, we will be able to access the context of the form in the components we create later.

FriendsForm.tsx

import React from 'react';

import { FormProvider } from 'react-hook-form';

import useFriendsForm from './useFriendsForm';

import FriendsFormField from './FriendsFormField/FriendsFormField';

import styles from './FriendsForm.module.scss';

const FriendsForm = () => {

const { handleSubmit, methods } = useFriendsForm();

return (

<button type="submit">Submit</button>

</form>

</FormProvider>

);

};

export default FriendsForm;

We use SCSS modules to style all of the componentes in this article.

We initiate the form with simple values. Then, if the user clicks on the submit button, we log the values to the console.

useFriendsForm.tsx

import FriendsFormValues from './FriendsFormValues';

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

function useFriendsForm() {

const methods = useForm<FriendsFormValues>({

defaultValues: {

friends: [],

});

const handleSubmit = (values: FriendsFormValues) => {

console.log(values);

};

return {

methods,

handleSubmit: methods.handleSubmit(handleSubmit),

};

}

export default useFriendsForm;

Using the useFieldArray hook

In our form, we have the friends array. In our case, we want users to be able to add, modify, and remove elements from this array. Fortunately, React Hook Form has a hook designed just for this purpose.

const { control, register } = useFormContext<FriendsFormValues>();

const { fields, append, remove } = useFieldArray<FriendsFormValues>({

control,

});

Above, we use the control object that contains methods for registering components into React Hook Form. We also provide the name of the field we want to handle.

React Hook Form currently does not support using useFieldArray to handle arrays of primitive values such as strings or numbers. Because of that, our friends property needs to be an array of objects.

The useFieldArray hook returns various useful objects and functions that allow us to interact with the array. In this application, we use the following:

fields – an array of objects containing the default value of a particular element and an autogenerated id to use as a key,
append – a function we use to add another element to our array,
remove – we can use this function to remove a particular element.

We can create a custom hook that uses all of the above functionalities.

useFriendsFormField.tsx

import { useFieldArray, useFormContext } from 'react-hook-form';

import FriendsFormValues from '../FriendsFormValues';

function useFriendsFormField() {

const { control, register } = useFormContext<FriendsFormValues>();

const { fields, append, remove } = useFieldArray<FriendsFormValues>({

control,

});

const addNewFriend = () => {

append({

});

};

const removeFriend = (friendIndex: number) => () => {

remove(friendIndex);

};

return {

fields,

addNewFriend,

removeFriend,

};

}

export default useFriendsFormField;

Now, we can create a component that takes advantage of all of the above functions.

FriendsFormField.tsx

import React from 'react';

import styles from './FriendsFormField.module.scss';

import useFriendsFormField from './useFriendsFormField';

const FriendsFormField = () => {

const {

fields,

addNewFriend,

removeFriend

} = useFriendsFormField();

return (

<button

type="button"

onClick={addNewFriend}

className={styles.addPropertyButton}

+ Add friend

</button>

</div>

{fields.map((field, index) => (

<button

type="button"

onClick={removeFriend(index)}

className={styles.removePropertyButton}

</button>

</div>

))}

</div>

);

};

export default FriendsFormField;

Above, the most crucial part is the following where we use the autogenerated field.id and the register function:

{fields.map((field, index) => (

<button

type="button"

onClick={removeFriend(index)}

className={styles.removePropertyButton}

</button>

</div>

))}

Please notice that we use register(`friends.${index}.name`)} instead of register(`friends[${index}].name`). This started to be the required approach since React Hook Form v7.

After doing all of the above, we end up with the following form:

Working with recursive data structures

So far, we’ve been working with a simple array of objects. Let’s make it a bit more interesting by making our data structure recursive.

If you want to know more about recursion, check out Using recursion to traverse data structures. Execution context and the call stack

FriendsFormValues.tsx

interface FriendsFormValues {

friends: FriendsFormValues[];

}

export default FriendsFormValues;

Let’s modify our FriendsFormField component to accept a prefix so that we can keep track of how deep we are in our form. Some of its possible values are:

an empty string,
friends[0].,
friends[1].friends[0].,
friends[2].friends[1].friends[0].,
…

FriendsFormField.tsx

import React, { FunctionComponent } from 'react';

import useFriendsFormField from './useFriendsFormField';

interface Props {

prefix?: string;

}

const FriendsFormField: FunctionComponent<Props> = ({ prefix = '' }) => {

const {

fields,

addNewFriend,

removeFriend,

nameInputPath

} = useFriendsFormField(prefix);

// ...

};

export default FriendsFormField;

Unfortunately, React Hook Form currently does not handle circular references in the data well with TypeScript as stated in the official documentation. Because of that, we declare our FriendsFormValues again without the circular references.

It is possible that React Hook Form 8 will improve the above situation.

useFriendsFormField.tsx

import { useFieldArray, useFormContext } from 'react-hook-form';

interface FriendsFormValues {

friends: { name: string }[];

}

function useFriendsFormField(prefix: string) {

const { control, register } = useFormContext<FriendsFormValues>();

const nameInputPath = `${prefix}name` as 'name';

const friendsArrayInputPath = `${prefix}friends` as 'friends';

const { fields, append, remove } = useFieldArray({

control,

});

const addNewFriend = () => {

append({

});

};

const removeFriend = (friendIndex: number) => () => {

remove(friendIndex);

};

return {

fields,

addNewFriend,

removeFriend,

nameInputPath,

};

}

export default useFriendsFormField;

Above, we combine the current prefix with “name” and “friends”. For example, if our prefix is friends[0].friends[1]., we get friends[0].friends[1].name and friends[0].friends[1].friends.

We now have everything we need to define the FriendsFormField component.

FriendsFormField.tsx

import React, { FunctionComponent } from 'react';

import styles from './FriendsFormField.module.scss';

import useFriendsFormField from './useFriendsFormField';

interface Props {

prefix?: string;

}

const FriendsFormField: FunctionComponent<Props> = ({ prefix = '' }) => {

const {

fields,

addNewFriend,

removeFriend,

nameInputPath

} = useFriendsFormField(prefix);

return (

<button

type="button"

onClick={addNewFriend}

className={styles.addPropertyButton}

+ Add friend

</button>

</div>

{fields.map((field, index) => (

<button

type="button"

onClick={removeFriend(index)}

className={styles.removePropertyButton}

</button>

</div>

))}

</div>

);

};

export default FriendsFormField;

The crucial thing is that FriendsFormField renders FriendsFormField recursively. To generate a new prefix, we combine the current prefix with friends.${index}.:

{fields.map((field, index) => (

<button

type="button"

onClick={removeFriend(index)}

className={styles.removePropertyButton}

</button>

</div>

))}

Thanks to the above approach, we end up with the following form:

Summary

In this article, we’ve managed to create dynamic forms that deal with recursive data structures using React Hook Form and TypeScript. To do that, we had to learn about the useFieldArray hook.

While React Hook Form was created just three years ago, it quickly became popular and recently caught up with Formik, its main competitor.