React: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state

Question

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 Collapse.

1. I want to stop collapsing current Collapse if one of NavLink inside Collapse is active

2. Would be nice to have opened Collapse after refreshing site (of course if some NavLink inside is Active)

This code gives me Cannot update during an existing state transition (such as within 'render'). Render methods should be a pure function of props and state error in console.

import React from 'react';
import { connect } from 'react-redux';
import { NavLink as Link } from 'react-router-dom';
import { Nav, NavItem, NavLink, Collapse } from 'reactstrap';
import { bindActionCreators } from 'redux';
import { actions } from './../../containers/Account/store';
import classnames from 'classnames';

class NavMenuAside extends React.Component {
    constructor(props) {
        super(props);

        this.state = { collapsed: {} };
    }

    toggle(itemIndex) {
        const { collapsed, active } = this.state

        // Don't collapse if some NavLinks inside is active
        // but allow to toggle() if is collapsed (if we refresh site)
        if (active === itemIndex && collapsed[itemIndex]) {
            return
        }

        this.setState({
            collapsed: {
                    ...collapsed,
                    [itemIndex]: !collapsed[itemIndex]
                }
            });
    }

    isActive = (itemIndex) => (match) => {
        const { active } = this.state

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

        return !!match;
}

    render() {
        const { t } = this.props;

        return (
            <Nav className="nav--aside">
                <NavItem>
                    <NavLink tag={Link} to="/admin/qqqq/ffff">{icon('envelope-colored', 'aside-svg')} {t('navMenu.alerts')}</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink onClick={() => this.toggle(1)} className={classnames({ 'open': this.state.collapsed[1] })}>{icon('analytics', 'aside-svg')} {t('navMenu.terefere')}</NavLink>
                    <Collapse isOpen={this.state.collapsed[1]}>
                        <NavLink tag={Link} isActive={this.isActive(1)} to="/admin/wfwfwfwfwwf">{t('navMenu.terefere2')}</NavLink>
                        <NavLink tag={Link} isActive={this.isActive(1)} to="/admin/qdqdqd">{t('navMenu.terefere2')}</NavLink>
                        <NavLink tag={Link} isActive={this.isActive(1)} to="/admin/qqqqq">{t('navMenu.terefere2')}</NavLink>
                        <NavLink tag={Link} isActive={this.isActive(1)} to="/admin/wfwwfwf">{t('navMenu.terefere2')}</NavLink>
                    </Collapse>
                </NavItem>
            </Nav>
        );
    }
}

Answer 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.