ListAddField not rending child fields.

[ApoorvSeth]

Hi All,

I am trying to create form with array and add properties on click of ListAddField. On Clicking (+) button, nothing is happening.

Below is the schema and JSX.

const schema: JSONSchemaType<FormData> = {
  type: 'object',
  properties: {
    projectName: { type: 'string' },
    groupName: { type: 'string' },
    addList: {
      type: 'array',
      items: {
        type: 'object',
        properties: {
          firstName: { type: 'string' },
          lastName: { type: 'string' }
        }
      }
    }
  },
  required: ['projectName', 'groupName']
};

JSX as below:

  return (
    <div>
      <AutoForm schema={schema} onSubmit={(e) => handleSubmit(e)}>
        <h4> Add a Project</h4>
        <AutoField name="projectName" />
        <AutoField name="groupName" />
        <ListAddField name="names">
        <div>
          <TextField name="$" label="firstName" />
          <TextField name="$" label="lastName" />
          <ListDelField name='Delete' label='Delete'></ListDelField>
        </div>
      </ListAddField>
        <SubmitField />
      </AutoForm>
    </div>
  );

[radekmie]

Hi @ApoorvSeth. It's because you've nested the fields inside the ListAddField and not ListField itself. Try this instead:

      <AutoForm schema={schema} onSubmit={(e) => handleSubmit(e)}>
        <h4> Add a Project</h4>
        <AutoField name="projectName" />
        <AutoField name="groupName" />
        <ListField name="names">
          <ListItemField name="$">
            <TextField name="firstName" />
            <TextField name="lastName" />
          </ListItemField>
        </ListField>
        <SubmitField />
      </AutoForm>

In such a setup:

• The ListField copies the ListItemField once for each list element and renders a ListAddField.
• The ListItemField is used as a container and renders a ListDelField.

If you'd like to change the layout of these components, you should create your own and adjust the markup. Don't hesitate - these are a few lines long!

(I let myself update your question to improve the code formatting.)