[React]map()にてkey設定が上手くいきません。

Question

メニュー項目を作ろとしており。
定義した配列からそれぞれvalueを抽出してmap()で回して行きたいのですが

Search for the keywords to learn more about each error.

keyがなく読み取れません。というようなエラーが出てしまいます。
こちらのhttps://ja.reactjs.org/docs/lists-and-keys.htmlには
「レンダーされる要素に安定した ID がない場合、最終手段として項目のインデックスを使うことができます」
下記のようにしてみましたが、上手く行きませんでした。

keyの付与に関してご指摘お願いいたします。

import React from "react";
import HeaderMenuLists from "./HeaderMenuLists"

const HeaderMenu = () => {

  const menuvalues = [
    {ja: トップ},
    {ja: プロフィール},
    {ja: 制作実績},
    {ja: お問い合わせ}
  ];

  return(
    <ul>
      {menuvalues.map((value, index) => (
        <HeaderMenuLists
          key={index.toString()}
          ja={value.ja}
        />
      ))}
    </ul>
  );
};

export default HeaderMenu;

import React from "react";

const HeaderMenuLists = (ja) => {

  return(
    <li>
      <a href="#">
        {ja}
      </a>
    </li>
  )
}

export default HeaderMenuLists;

Comments

[hoshi-takanori]

Search for the keywords to learn more about each error. は Google 翻訳によれば「各エラーの詳細については、キーワードを検索してください。」という意味で、それ自体はエラーメッセージではありません。その前にエラーメッセージが書いてあったはず…。

[siruku6]

ちょっと確信はないですが、今回`HeaderMenuLists`の引数にkeyが存在しないので、
key={index.toString()}
はいらない、とかではないでしょうか...？

また、hoshi-takanoriさんがおっしゃる通り、元のエラー文を質問に掲載していただくのが確実ですね。。。（それ次第で対策が全然変わってきます）