Question 271990 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Error: Missing "key" prop for element in iterator

when i try to next build i got some error!

61:13 Error: Missing "key" prop for element in iterator react/jsx-key

This Full Code :

import { useEffect, useState } from 'react';
import Image from 'next/image';
export default function RootLayout({ children }) {
  
  const [activeButton, setActiveButton] = useState(0);

  const buttons = [
    { text: "Home", icon: HomeLogo, link: "/"},
    { text: "Project", icon: ProjectLogo, link: "/project"},
    { text: "Certificate", icon:  CertificateLogo, link: "/certificate"},
    { text: "Resume", icon:  ResumeLogo, link: "/resume"},
    { text: "Contact", icon:  ContactLogo, link: "/contact"}
  ];

  useEffect(() => {
    const menuItems = document.querySelectorAll(".menu__item");

    menuItems.forEach((item, index) => {
      const text = item.querySelector(".menu__text");
      setLineWidth(text, item);

      window.addEventListener("resize", () => {
        setLineWidth(text, item);
      });

      item.addEventListener("click", function () {
        if (index === activeButton) return;

        setActiveButton(index);
      });
    });
  }, [activeButton]);

  function setLineWidth(text, item) {
    const lineWidth = text.offsetWidth + "px";
    item.style.setProperty("--lineWidth", lineWidth);
  }

  return (
    <html lang="en">
      <body className={gabarito.className}>
        <menu className="menu text-ColorFontMain flex select-none items-center h-24 rounded-xl shadow-xl justify-center fixed bg-ColorMain opacity-90 z-10 top-80 mt-52 mx-3 md:mx-72">
          {buttons.map((button, index) => (
            <Link href={button.link} className={`menu__item ${index === activeButton ? "active" : ""}`}>
              <div className="menu__icon">
                <Image src={button.icon} width={32} height={32} alt={button.text}/>
              </div>
              <strong id='menu__text' className={`menu__text ${index === activeButton ? "active" : " "}`}>
                {button.text}
              </strong>
            </Link>
          ))}
        </menu>
        {children}
      </body>
    </html>
  );
}

when i try to next build i got error

Error: Missing "key" prop for element in iterator react/jsx-key

and then run the dev it can run

Tags:

2

Answers


  1. 0

    I think you missing the key={index}

    {buttons.map((button, index) => (
  <Link key={index} href={button.link} className={`menu__item ${index === activeButton ? "active" : ""}`}>
    <div className="menu__icon">
      <Image src={button.icon} width={32} height={32} alt={button.text}/>
    </div>
    <strong id='menu__text' className={`menu__text ${index === activeButton ? "active" : " "}`}>
      {button.text}
    </strong>
  </Link>
))}
    Login or Signup to reply.
  2. 0

    React uses key to determine the uniqueness of each element in an iterator. Add key={#uniqueValue} to each iterated element in {array.map}. Using array index is discouraged, so in your case you could use button.text.

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

Back To Top
Search