Filter Menu Trigger Function

Hello, Furkan,

If we need an event when the filter will be expanded/collapses the event onExpandChange will be fired as expected.

If we need an event that will be triggered when the entire ColumnMenu is opened and close, we can use its component did mount event for open and the component will unmount for the close.

https://stackblitz.com/edit/react-ijpid6?file=app/columnMenu.jsx

Regards,
Stefan
Progress Telerik

Hi Stefan,

ComponentDidMount is not proper for me. Because I want to use setState method but I get "Maximum update depth exceeded componentdidmount" error

Hi Furkan,

In React many components do no have onOpen events (or in this case onOpenMenu event), as they are similar to the React lifecycle methods. It is not an anti-pattern to call setState in componentDidMount method. But you should make sure that there is a break condition that prevents updating the state every time you component updates.

React keeps count on how many renders are triggered in a row and if you exceed the maximum count (maximum update depth), then it will throw this error and assume you have an infinite render loop problem.

Best Regards,
Silviya
Progress Telerik

I think you don't understand me.

Here is my problem:

https://stackblitz.com/edit/react-ibseaj?embed=1&file=app/main.jsx

How will you update the toggleBool state?

As you can see when you click a filter it will give you error maximum update depth

Hello, Furkan,

Thank you for the additional details.

This occurs as the columnMenu is set as an inline function and React, does not keep references to inline functions in the render. This is why, when we update the toggle on component did mount, the parent component is updated, and as the reference is not kept we call component did mount again of the columnMenu and we go into an endless loop.

The same will happen if we have an onOpen event and set the same logic there.

We have two options in this case:

1) Set the column menu to a function outside of render, this way updating the toggle state will not re-initialize the column menu:

https://stackblitz.com/edit/react-rj8b8s?file=app/main.jsx

2) Pass the current toggle value to the column menu component and only update it to true only if it is still false, to ensure we will not make the same update multiple times. 

We can even combine both approaches to ensure a more stable solution.

Regards,
Stefan
Progress Telerik