Dynamic name for react-final-form Field

Question

I have 2 forms. When I choose an option on 1st form, the 2nd form is added to the page with the parameters retrieved from backend. Now how can I set the parameter names as react-final-form Field names?

I could not find a way to do this. Where to pass the parameter names?

  <Form
    onSubmit={onSubmit}
    validate={validate}

Answer 1

Call the FinalForm like

<FinalFieldArrayForm onSubmit={this.handleSubmitTemplate} fieldsFromServer={parameters} />

and FinalForm is

import React from "react";
import ReactDOM from "react-dom";
import { Form, Field } from 'react-final-form'
import arrayMutators from 'final-form-arrays'
import { FieldArray } from 'react-final-form-arrays'

import "./styles.css";

const FinalForm = ({onSubmit, fieldsFromServer}) => (
  <Form
    onSubmit={onSubmit}
    mutators={{
      // potentially other mutators could be merged here
      ...arrayMutators
    }}
    render={({
      handleSubmit,
      form: {
        mutators: { push, pop }
      },
      pristine,
      form,
      submitting,
      values
    }) => (
      <form onSubmit={handleSubmit}>
        <div className="buttons">
          <button type="button" onClick={() => push('records', undefined)}>+</button>
          <button type="button" onClick={() => pop('records')}>-</button>
          <button type="button" onClick={form.reset} disabled={submitting || pristine}>Reset</button>
        </div>
        <FieldArray name="records">
        { ({fields}) => (
          <div>
          {fields.map( (name, index) => (
            <div key={`${name}.${index}`}>
              <label>{index + 1}</label>
              {fieldsFromServer.map( param => <Field key={`${name}.${param}`} name={`${name}.${param}`} component="input" placeholder={`${name}.${param}`} /> )}
              <button type="button" onClick={() => fields.remove(index)}>-</button>
              <button type="button" onClick={() => fields.insert(index+1)}>+</button>
            </div>
          ))}
          </div>
        )}
        </FieldArray>
        <div className="buttons">
          <button type="submit" disabled={submitting || pristine}>Submit</button>
        </div>
        <pre>{JSON.stringify(values, 0, 2)}</pre>
      </form>
    )}
  />
)

const rootElement = document.getElementById("root");
ReactDOM.render(<FinalForm onSubmit={() => (<div/>)} fieldsFromServer={["firstName", "lastName"]} />, rootElement);