form.jsx

const initialForm = {
  name: "name placeholder",
  title: "title placeholder",
  pets: [ 
    {
      name: "Flow", 
      funFact: "she can typecheck!",
    },
  ],
};

// ================== BEFORE ==================

<Form
  initialValue={initialForm}
  serverErrors={{}}
  feedbackStrategy="Always"
  onSubmit={value => { console.log("SUBMITTED", value); }}
>
  {(link, onSubmit) => (
    <React.Fragment>
      <h1>Form Title</h1>
      <p>Form description</p>

      <ObjectField
        link={link}
        validation={this.validateForm}
      >
        {link => (
          <React.Fragment>
            <p>Name</p>
            <StringField link={link.name}/>

            <p>title</p>
            <StringField link={link.title}/>

            <ArrayField link={link.pets}>
              {(links, { addField, removeField, moveField }) => (
                <React.Fragment>
                  <p>Pets</p>

                  {links.map((link, i) => (
                    <div key={i}>
                      <ObjectField link={link}>
                        {link => (
                          <React.Fragment>

                            <StringField
                              link={link.name}
                              validation={checkString}
                            />
                            <StringField
                              link={link.funFact}
                              validation={checkString}
                            />
                          </React.Fragment>
                        )}

                      </ObjectField>
                    </div>
                  ))}

                  <button
                    onClick={() => addField(links.length, {name: "petNamePlaceholder", funFact: "funFact"})}
                  >
                    Add Pet
                  </button>
                </React.Fragment>
              )}
            </ArrayField>
          </React.Fragment>
        )}
      </ObjectField>

    <p>Submit form</p>

    <button onClick={onSubmit}>Submit</button>
    </React.Fragment>
  )}
</Form>


// ================== AFTER ==================

<Form
  initialValue={initialForm}
  serverErrors={{}}
  feedbackStrategy="Always"
  onSubmit={value => {
    console.log("SUBMITTED", value);
  }}
>
  {(formData, onSubmit) => (
    <Validation validation={this.formValidation}>
      <React.Fragment>
        <h1>Form Title</h1>
        <p>Form description</p>

        <p>Name</p>
        <StringField link={formData.name} />

        <p>Title</p>
        <StringField link={formData.title} />

        <List>
          {({addField, removeField, moveField}) => (
            <React.Fragment>
              <p>Pets</p>

              {formData.pets.map((pet, i) => (
                <div key={i}>
                  <StringField
                    link={link.name}
                    validation={checkString}
                  />
                  <StringField
                    link={link.funFact}
                    validation={checkString}
                  />
                </div>
              ))}

              <button
                onClick={() => addField(links.length, {name: "petNamePlaceholder", funFact: "funFact"})}
              >
                Add Pet
              </button>
            )}
          </React.Fragment>
        </List>
      </React.Fragment>
    </Validation>
  )}
</Form>