React/Jasvascript:Dynamic classname setting in map function

Question

I have a function to display user dashboard navigation. This function should set active funciotn to this elem waht is click default is 1 starter element/link.But i get infinite loop.

const UserLinks = [
  {
    name: "User Details",
    linkTo: "/dashboard",
  },
  {
    name: "Change Password",
    linkTo: "/dashboard/changePassword",
  },
];
const DasboardLinks = () => {

  const [active, setActive] = useState(1);

  return (
    <SectionNavigation>
      <ul>
        { UserLinks.map((link, i) => (
              <li key={i} className={active === i ? "active" : ""}
            onClick={setActive(i)}>
                <Link to={link.linkTo}>{link.name}</Link>
              </li>
            ))}
      </ul>
    </SectionNavigation>
  );
};

When it is executed i get Too many re-renders. React limits the number of renders to prevent an infinite loop.How can i fix it to work.

Domino987 · Accepted Answer · 2021-01-28 15:50:19Z

2

You are calling setActive instead of passing a function:

onClick={() => setActive(i)}>

answered Jan 28, 2021 at 15:50

Domino987

8,8642 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

klixo Over a year ago

what a stupid mistake thanks i didnt swa it :)

Collectives™ on Stack Overflow

React/Jasvascript:Dynamic classname setting in map function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related