React: Cannot Update During An Existing State Transition (such As Within `render`). Render Methods Should Be A Pure Function Of Props And State

I want to have active NavLink 'submenu key' in React state to tell NavLink's onClick() method to check if any of NavLinks in Collapse is active and if so, don't toggle isOpen for C

Solution 1:

You are getting that error because of your isActive function.

I dont know a lot about the component you are using, NavLink, but I'm guessing the isActive prop is a bool, and while you are fetching the value for isActive you are getting to this piece of code

if (match) {
    if (active !== itemIndex) {
        this.setState({
            active: itemIndex
        })
    }
 }

which is causing an update to state inside your render function.

You need to find a way to figure out those values before the render, move the setState logic out of that function and perform it somewhere else. Usually, I will use componentDidUpdate to look for changes in state/props and call setState there.

Let me know if you have any questions on this or need clarification.

Solution 2:

I don't know what you are trying to achieve, but to me, you are setting the same values to state every time you call isActive since itemIndex is always 1.

But as answered above, remove setState in isActive and the error will go away