nested accordions - onTabChange not working

UI Components for React
Post Reply
lharley
Posts: 4
Joined: 16 Nov 2018, 01:43

05 Feb 2019, 10:28

I have two nested accordions with the structure below. I am defining the props for each Accordion and the AccordionTabs from data. The layout and nesting of the accordions looks exactly the way I want when rendered, so pulling from the data and defining the Accordions appears to be working.

but I can't get the onTabChange handlers for each Accordion to update its own activeIndex, soI can open and close the Tabs. I have tried creating a ref to each Accordion and calling each onTabChange handler with the ref, but this doesn't work. I've tried passing a function to onTabChange that binds 'this', but this doesn't work. I've read that everything in React must be updated through managing props and this.setState, but I've only been coding React for 6 months and managing the props and state for nested child components is beyond my understanding. Can anyone help ? Is there a working example somewhere?

<Accordion id='level1'>
<AccordionTab hear="Level 1-1">

<Accordion id='level2'>
<AccordionTab header="Level 2-1">
</AccordionTab>

<AccordionTab header="Level 2-2">
</AccordionTab>

<AccordionTab header="Level 2-3">
</AccordionTab>

</Accordion>
</AccordionTab>
</Accordion>

lharley
Posts: 4
Joined: 16 Nov 2018, 01:43

06 Feb 2019, 18:46

After an 11-hour day of struggling, I finally figured how to set the activeIndex for each of the nested accordions. I read this article sent by a colleague trying to help --
https://stackoverflow.com/questions/430 ... s-in-react

Based on this article, I realized that you can't manage the nested accordions as nested components. React doesn't seem to like this approach. It's too much 'in the weeds' and Declarative Programming doesn't want you to think so much about the details of how to get something done. React wants you to think about the overall state of your component as rendered. You change the component through changing props passed to the component, not by tinkering with the component elements.

So I re-thought my approach and decided that if I couldn't manage the nested components, then I could manage the data on which the components depend. So I changed my thinking from a set of nested accordions to a single accordion entity, which gets defined by the accordion data. Each time the user clicks on an accordion element, I use the event to change the activeIndex of the data, then I call setState({entityData:accordionData}). Calling setState() gets the component to re-render with the new data. I had to completely restructure the way the data is captured and parsed and I had to redefine how and where the accordions get rendered, but it works! Not sure if experienced React developers will find my approach kosher, but as I said, it works!

Since I am a struggling wannabe React developer, I thought I would post the solution I found. Perhaps it will help other newbies.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests