title: How to nest FieldArray functionality inside other <FieldArray> component with React-final-form
body: <p>Within the app i am developing, there is a module to make surveys/polls. The backend has already been programmed, and basically there is an endpoint that accepts a complex object in the body and then it will build the poll. The complex object can vary according to the poll and question types, some are multiple choice and some are votes, and some are open ended. An example of this complex object i am trying to build loos like this:</p>
  
  <pre><code>{
    "title": "Newish first poll",
    "description": "juan's first wizard poll",
    "status": "new",
    "start_date": "2019-03-12 08:00:00",
    "end_date": "2019-03-25 08:00:00",
    "questions" : [
      {
          "question_text":"HOW CAN DIS BE",
          "type":"1",
          "choices": []
      },
      {
          "question_text":"Choose your weapon",
          "type":"0",
          "choices": [
              {
                  "choice_text": "Sword",
                  "description": "Sharp and durable, the sword is very popular."
              },
              {
                  "choice_text": "Hammer",
                  "description": "Stop!"
              },
              {
                  "choice_text": "Poetry",
                  "description": "Nothing more devastating than a poetry slam"
              }
          ]
      },
      {
          "question_text":"Do you agree?",
          "type":"1"
      }
    ]
  }
  </code></pre>
  
  <p>So essentially, the object has fieldArray called questions, which contains question objects. However, these question objects can also contain arrays of choices if it is a multiple choice question, and each choice has 2 potential fields, the choice text and the choice description.</p>
  
  <p>In general terms, using just onefield array and the available mutator push, i am able to push a full question object, currently hard coded into a variable passed like so: <code>push('questions',sampleQuestion1)</code> when pushing a button.</p>
  
  <p>Since the question array already contains the choices[] array, then the form will work, however, i cannot render the values of the choices array inside other  in the same way i would with the top level of the FieldArray</p>
  
  <p>This is what the basic implementation looks like</p>
  
  <pre><code>&lt;FieldArray name='questions'&gt;
      {({fields})=&gt;(
          &lt;div&gt;
              {fields.map((question,i)=&gt;(
                  &lt;div key={i}&gt;
                      &lt;div className={'form-group'}&gt;
                          &lt;InputField name={`${question}.question_text`} placeholder={'Pregunta'} disabled/&gt;
                          &lt;FieldArray name={'choices'}&gt;
                              {({fields})=&gt;(
                                  //i would like to be able to map through fields of the choices array, if present
                              )}
                          &lt;/FieldArray&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              ))}
          &lt;/div&gt;
      )}
  &lt;/FieldArray&gt;
  </code></pre>
  
  <p>I tried putting in a  component inside of another fieldarray, this is of course rather naive and i discovered quickly that the push mutator was already called with the added data, and that i cant map through the fields of choices, since the question object passed in the parent <code>fields.map</code> is not actually the question object per se.</p>
  
  <p>I have tried a few other techniques and have been readin the documentation, but im a bit stumped. If anyone could help me figure out if this is even possible, i'd very much appreciate it</p>