Question 73130 in Reactjs Question posted in
The new location for the React Documentation can be found here.

'Maximum update depth exceeded' error when using dropdown navigation a second time – Reactjs

I am trying to redirect to another page when clicking on an item inside of a dropdown, on my sidenav. I get redirected as usual to the page the first time without any errors, however, when I click on the same item, or another from a different dropdown again, it throws this error:

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn’t have a dependency array, or one of the dependencies changes on every render.

I have created an array that stores all of the necessary information as props taken from another component, which can be seen here:

Taken from:

<SidenavDropdown
  sidenavButtonName="Service 0.5GB"
  sidenavItemNames={[
    "Console",
    "File Manager",
    "Remote Access",
    "Configuration",
    "Subusers",
  ]}
  sidenavItemLinks={[
    "/console",
    "/files",
    "/remote",
    "/configure",
    "/subusers",
  ]}

Given to rows in my SidenavDropdown:

  const rows = [];
  for (let i = 0; i < props.sidenavItemNames.length; i++) {
    rows.push(
      <DropdownItem
        itemName={props.sidenavItemNames[i]}
        itemLink={props.sidenavItemLinks[i]}
      />
    );
  }

Afterwards, in my return in SidenavDropdown, I return the {rows} in a div:

  <div className={`overflow-hidden bg-[#283046] rounded-lg transition-transform ease-in duration-300`}>
     {rows}
  </div>

This is also my DropdownItem component:

const DropdownItem = (props) => {
  const [goTo, setGoTo] = useState(false);

  if (goTo) {
    return <Navigate exact to={props.itemLink} />;
  }

  return (
    <div className="...">
      
      <button
        onClick={() => setGoTo(true)}
        className="..."
      >
        {props.itemName}
      </button>
    </div>
  );
};

I am assuming that there is an infinite loop somewhere in my code, re-rendering the component. What I do not understand is why the button itself when clicked, displays this error in the console, as well as removes itself completely from the DOM, inside the dropdown, leaving nothing inside.

Could anyone assist me on this matter?

Tags:

2

Answers


  1. 0

    I think you should rewrite your dropdownItem commponent slightly since useState doesn’t do anything here it could be the cause of the error.

    const DropdownItem = (props) => {
  const navigateTo () {
    // call the api of the navigation you use directly
    // return <Navigate exact to={props.itemLink} />;
  }

  return (
    <div className="...">
      
      <button
        onClick={() => navigateTo()}
        className="..."
      >
        {props.itemName}
      </button>
    </div>
  );
};
    Login or Signup to reply.
  2. 0

    Another option is not to use onClick handlers, but directly use react-router Link component and wrap button inside it. Like in Wrapping a react-router Link in an html button

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search