React nested accordion parent not updating height

Question

I'm trying to build a mobile version of my homepage and there seems to be a bug with my nested accordion "items" where it doesn't display the correct height of the bottom item section when first opened. To open it, you first click on the project text, then it lists the projects, then click on the project to toggle the project card. (Updated) I believe this is happening because my parent accordion is not re-updating its height when the child accordion is opened. Do you know a good way to do this? Or if necessary, should I restructure my components in a way that makes this possible? The difficulty is that Accordion accepts children and

P粉998100648 · Answer

problem analysis:

TL;DR: The parent accordion needs to know about these changes so that it can adjust its height accordingly.

I think you might be using amiut/accordionify as shown via "Create lightweight React Accordions" From Amin A. Rezapour.
This is the only project I've found that uses AccordionGroup.

The nested accordion structure in the application involves a parent-child relationship, where the height of the child accordion changes dynamically depending on whether it is expanded or collapsed.

This can be illustrated by your Portfolio.tsx where the AccordionGroup component contains multiple Accordion component projects created based on array. These Accordion components are the "child" accordions mentioned:

export function Portfolio({ className = "", testId = "portfolio" }: PortfolioProps) {
  return (
    
      {projects.map((project, index) => (
        
          
        
      ))}
    
  )
}

Each child Accordion contains a ProjectCard that displays the project details. When the user clicks on the Accordion (or "Project"), it expands to show the ProjectCard.
This is where height changes come into play; the accordion will expand or collapse based on user interaction, changing its height dynamically.

Dynamic height is managed in Accordion.tsx:

  function handleToggle() {
    if (!contentHeight?.current) return
    setIsOpen((prevState) => !prevState)
    setHeight(isOpen ? "0px" : `${contentHeight.current.scrollHeight}px`)
    if (onClick) onClick()
  }

When the handleToggle function is called, it checks whether the accordion is currently open (isOpen). If it is, the height is set to "0px" (i.e. accordion collapsed). If not open, the height is set to the scroll height of the content (i.e. the accordion is expanded).

The dynamic height changes of these children's accordions are a key part of your problem. The parent accordion needs to know about these changes so that it can adjust its height accordingly.

I see in the same Accordion.tsx:

  useEffect(() => {
    if (isActive === undefined) return
    isActive ? setHeight(`${contentHeight.current?.scrollHeight}px`) : setHeight("0px")
  }, [isActive])

The height of the accordion is set according to the isActive property, which indicates whether the accordion is currently open. If on, the height is set to the scroll height of the accordion content (effectively an expanded accordion), if not activated the height is set to 0px (a collapsed accordion).

However, while this effect correctly adjusts the height of each accordion based on its own isActive state, it does not take into account changes in the height of the child accordions.

When a nested (child) accordion changes its height (due to expansion or collapse), the height of the parent accordion is not recalculated and therefore does not adjust to fit the new height of the parent's child.

In other words, when the height of the child accordion changes, the parent accordion doesn't know that it needs to re-render and adjust its height. Lack of re-rendering when a nested accordion is expanded or collapsed causes the parent accordion to not display the correct height.

Possible solutions

TL;DR: The solution involves making the parent aware of the child accordion's height changes so that it can adjust its own height accordingly.

("React: One of the techniques mentioned in Force component re-rendering | 4 easy ways " from Josip Miskovic)

Your Accordion component can benefit from a callback function prop that is called when its height changes, such as onHeightChange. Then, in the Portfolio component, you can propagate this height change up to the Homepage component by passing a new callback function to the Accordion component, using onHeightChange property.

accordion.tsx：

export interface AccordionProps extends Component {
  title: string
  children: ReactNode
  isActive?: boolean
  onClick?: () => void
  onHeightChange?: () => void
  headingSize?: "h1" | "h2"
}

export function Accordion({
  className = "",
  title,
  children,
  isActive,
  onClick,
  onHeightChange,
  headingSize = "h1",
  testId = "Accordion",
}: AccordionProps) {
  // ...

  useEffect(() => {
    if (isActive === undefined) return
    isActive ? setHeight(`${contentHeight.current?.scrollHeight}px`) : setHeight("0px")
    if(onHeightChange) onHeightChange() // Call the onHeightChange callback
  }, [isActive])

  // ...
}

Then modify your Portfolio component to propagate the height change event:

export function Portfolio({ className = "", testId = "portfolio", onHeightChange }: PortfolioProps & {onHeightChange?: () => void}) {
  return (
    
      {projects.map((project, index) => (
        
          
        
      ))}
    
  )
}

Finally, you can add a key to the Portfolio accordion on the home page that will change when the height change event is triggered. This will cause the accordion to re-render:

export function Homepage({ className = "", testId = "homepage" }: HomepageProps) {
  const [key, setKey] = useState(Math.random());
  //...

  return (
    //...
    
       setKey(Math.random())} />
    
    //...
  )
}

This way, you will force the parent Accordion component to re-render whenever the height of the child Accordion changes.

P粉649990273 · Answer

You know, the implementation here is a bit challenging because when you want to update the height of a grandparent accordion from its child accordion, you can't really know from there which corresponding grandparent accordion you want to update unless you pass the props Give the grandparent accordion, and pass the props to the intermediate component (e.g. Portfolio, the parent of the child accordion) so that it can propagate them to its child accordion.
By doing this we can allow grandparents and child accordions to communicate in some way.
Maybe this isn't the best solution you can find, but sadly I can't think of a better one.

So to recap: the idea is to create a state at the top level to hold a reference to the height of each parent accordion, so it's an array where the length is set "manually", which makes it somewhat ugly , but if you have to use a data array to display your component dynamically, then this is not a problem, as we will find out later, we will also see the limitations of the workaround.

Solution:

Now we'll go with the simplest, most straightforward fix that works for what's included in the question.

As mentioned above, first we create the state in the HomePage component:

const [heights, setHeights] = useState(Array(7).fill("0px")); // you have 7 parent Accordions

After creating the array state at the top level, now we pass the state setting function setHeights, index indexx and the corresponding height heightParent to each Accordion component if It is the parent Accordion

Note: The indexx attribute passed to the parent and the indexx attribute passed to the intermediate component (Portfolio) should have the same value represents the corresponding index, which is actually the key to the solution.
Named "indexx" with two "x"s in it to avoid future conflicts.

Then, pass these received props from the middle component to the child accordion:

export function Portfolio({
  className = "",
  testId = "portfolio",
  indexx,
  setHeight,
}: PortfolioProps) {
  // update props interface
  return (
    
      {projects.map((project, index) => (
        
          
        
      ))}
    
  );
}

Now, from your child Accordion component, you can utilize the passed indexx property to update the height of the corresponding Accordion parent in the HomePage state, so when we update the child height, we also update the parent high

function handleToggle() {
  if (!contentHeight?.current) return;
  setIsOpen((prevState) => !prevState);
  let newHeight = isOpen ? "0px" : `${contentHeight.current.scrollHeight}px`;
  if (!heightParent) { // there is no need to update the state when it is a parent Accordion
    setHeight(newHeight);
  }
  setHeights((prev) =>
    prev.map((h, index) => (index == indexx ? newHeight : h))
  );
}

Finally, when you specify the height of an Accordion, you can check if it receives heightParent as props so that we know it is the parent, this way, we make the Accordion component use heightParent As maxHeight instead of its own state height (if it is the parent state), this is why updating the height state is ignored when it is open parent Accordion, therefore, we have to change the way the maxHeight property is set, now it should depend on the nature of the Accordion:

style={{ maxHeight: `${heightParent? heightParent : height }` }}

If you want the parent Accordion just use its state height as maxHeight and keep the code the same, it makes more sense

style={{ maxHeight: height }}

You can still do this by adding a useEffect in the Accordion component and making sure it only runs when the received heightParent property is updated and defined, we do this to ensure the code Run only if the parent accordion should update its height state:

useEffect(()=>{
 if(heightParent){
   setHeight(heightParent)
 }
},[heightParent])

As mentioned above, this makes more sense and is also the prettiest, but I still prefer the first one as it's simpler and also saves an extra render.

Dynamic data processing:

If we store data in an array and want to display our component based on this, we can do this:

const data = [...]
const [heights, setHeights] = useState(data.map(_ => "0px")); 
//...

 
  {data.map(element, index => {
     
       {element.for === "portfolio" ?  :  }  // just an example
     
  })
  }

You can notice that we have to specify a key in the parent accordion so that we can use it instead of indexx, but you know key > The property is special and we don't want to mess with it no matter what, I hope you understand

limit:

Obviously this solution only works for one level, so if the sub-accordion itself becomes a sub-accordion you have to wrap around it again, but if I understand what you are doing you probably won't face this Situation, because with your implementation the child Accordion should show the items, but who knows maybe one day you will need to make it return another child Accordion, that's why I think my suggestion is a workaround and not the best solution.

Like I said, this might not be the best solution, but to be honest, especially for this implementation, I don't think such a multi-level working solution exists, please prove me wrong Yes, I am following this post.