How do I include a form inside an accordion? (React, Formik)

Question

I'm creating quite a large form application in ReactJS using Formik. I want to divide my form into sections using a bootstrap accordion, but this has introduced some challenges for me.

My accordion is its own component, and consists of 3 sections. Each section imports a form component like so:

     Section 1
    <Accordion.Collapse eventKey="0">
      <Card.Body>
         <Form_part1/>
      </Card.Body>
    </Accordion.Collapse> 

I want to gather these forms so that I can send all the values simultaneously with a single submit button below the accordion.

I should probably use some sort of nested form, or sub-forms to achieve my goal, but don't know how to achieve this. Some pointers and a suggested file structure would be highly appreciated.

Oh, and I'm quite new to this library so excuse my ignorance!

Answer 1

用一个Form组件包装手风琴，该组件可保存所有表单零件的状态