react-form nested lists and dynamic lists

[jaret32]

Overview

Add support for nested lists and dynamic lists to the react-form package.

Type

• New feature
• Changes to existing features

Motivation

I am trying to use the react-form package to model a form where one of the fields is a dynamic list of fields and one of those fields is also a dynamic list. Extending the example provided in the useDynamicList section of the documentation, let's say a card also has a list of qualified users. I tried the approach below by calling useDynamicList in the card factory, but that did not work, and I don't know if there is an easy way to make this work.

interface QualifiedUser {
  name: string;
  limit: number;
}

const qualifiedUserFactory = (): QualifiedUser => ({
  name: '',
  limit: 0
});

interface Card {
  id: string;
  cardNumber: string;
  cvv: string;
  qualifiedUsers: QualifiedUser[];
}

const emptyCardFactory = (): Card => ({
  id: Date.now().toString(),
  cardNumber: '',
  cvv: '',
  qualifiedUsers: useDynamicList([], qualifiedUserFactory)
});

const {
  fields,
  addItem,
  removeItem,
  moveItem,
  reset,
  dirty,
  value,
  newDefaultValue,
  defaultValue,
} = useDynamicList([], emptyCardFactory);

Checklist

• Please delete the labels section before submitting your issue
• I have described this issue in a way that is actionable (if possible)

[huykon]

Did you found the solution?

[vincaslt]

I too need to support nested lists like this: