Как исправить ошибку с ключом в компоненте?

Question

делаю обычное SPA в целях обучения и в консоли вылетает ошибка с уникальными ключами. Вот мой компонент, лишке задал ключ и при этом так же вылетает ошибка. Что не так ?

import React from "react";
import { menu } from "./menu";
import { Link } from "react-router-dom";
import styles from "./Header.module.scss";

export default function () {
  return (
    <nav className={styles.navigation}>
      <div className={styles.wrapper}>
        <ul className={styles.menu}>
          {menu.map((item, idx) => (
            <li key={menu.idx}>
              <Link to={item.link}>{item.title}</Link>
            </li>
          ))}
        </ul>
        <div className={styles.buttons}>
          <button className={styles.loginButton}>
            <Link
              to="/login"
              style={{ textDecoration: "none", color:                 "#ffff" }}
            >
              Login
            </Link>
          </button>
          <button className={styles.signupButton}>
            <Link
              to="/signup"
              style={{ textDecoration: "none", color:                 "#ffff" }}
            >
              Sign up
            </Link>
          </button>
        </div>
      </div>
    </nav>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

Как исправить ошибку с ключом в компоненте?

Ответы (0 шт):