How to create dynamic nested accordion in React Native

Question

All of the examples I've found online only show how to create single level accordion, like this:

-parent1
    -child1
-parent2 
    -child2

I need to create dynamic accordion that has multiple nested parents, like this:

-parent
   -subparent1
      -subparent2
        ...
          -subparentN
             - child

My data comes in this format:

// first object in response is always considered to be the PARENT, 
last one is always CHILD, and those in between are SUBPARENTS
// number of SUBPARENTS is not constant
"parents": [
        {
            "id": "583",   // TOP LEVEL PARENT
            "label": "PARENT",
            "description": "irrelevant description here, i only need to show label for parents"
        },
        {
            "id": "593",
            "label": "SUBPARENT1",
            "description": "..."
        },
        {
            "id": "594",
            "label": "SUBPARENT2",
            "description": "..."
        },
        {
            "id": "604",
            "label": "SUBPARENT3",
            "description": "..."
        },
        {
            "id": "605", // CHILD
            "label": "CHILD LABEL",
            "description": "FEW LINES OF DESCRIPTION I NEED TO DISPLAY"
        }
    ]

score 1 · Answer 1 · answered Sep 23 '19 at 12:57

Based on the component you linked, it might be a good idea to have each as its own array (parent, subparent, an child label), and render its own collapsible.

For parent, have an accordion inside _renderContent function, and have that accordion be filled with its subparent. For subparent with child, have their _renderContent be filled with its child's content as well.

For parent's renderContent (see its sections props)

_renderContent = section => {
return (
  <View style={styles.content}>
     <Accordion
    sections={SUBPARENT_SECTIONS}
    activeSections={this.state.activeSections}
    renderSectionTitle={this._renderSectionTitle}
    renderHeader={this._renderHeader}
    renderContent={this._renderContent}
    onChange={this._updateSections}
  />
  </View>
);

};

For subparent, do the same thing with its child label. It's probably a good idea not to have them on the same array, so you don't confuse them together.

How to create dynamic nested accordion in React Native

1 Answers1