Каждый ребенок в списке должен иметь уникальный "ключ" prop error с uuid в качестве ключевой реакции

Я получаю сообщение "Each child in the list should have a unique "key" prop." в консоли конкретно здесь (он цитирует первую строку как соответствующую строку) 

<Dropdown.Menu variant="dark">
  {[
    [0, "prod_name", "Name"],
    [1, "price", "Price"],
    [2, "average_rating", "Rating"],
  ].map((item, i) => (
    <>
      <Dropdown.Item
        as={Button}
        key={uuid.v4()}
        onClick={() => {
          this.setState({ sort: item[0], open: false });
          this.context.sort(item[1], "asc");
        }}
        className={
          this.state.sort === item[0]
            ? "text-black giBold active"
            : "text-light"
        }
      >
        {item[2] + " (ascending)"}
      </Dropdown.Item>
      <Dropdown.Item
        as={Button}
        key={uuid.v4()}
        onClick={() => {
          this.setState({ sort: item[0] + 3, open: false });
          this.context.sort(item[1], "desc");
        }}
        className={
          this.state.sort === item[0] + 3
            ? "text-black giBold active"
            : "text-light"
        }
      >
        {item[2] + " (descending)"}
      </Dropdown.Item>
    </>
  ))}
</Dropdown.Menu>;

Я изменил ключ на uuid, так как понял, что тонны id разных элементов будут одинаковыми, в надежде, что это исправит ошибку, но она продолжает появляться.

Есть ли здесь что-то еще в игре, что я упустил, я пытался искать ответы, но не смог ничего найти.

О, вам просто нужно добавить ключ к <>, потому что свойство key должно быть в первом теге в секции render функции map и изменить пустой тег на <div> или <React.Fragment>, потому что пустой тег не может иметь никакого свойства. Ваш код должен выглядеть следующим образом;


[...].map((item, i) => (
    <div key={uuid.v4()}> // this tag's key important for map function
      <Dropdown.Item
        as={Button}
        key={uuid.v4()}
        ...
      >
        {item[2] + " (ascending)"}
      </Dropdown.Item>
      <Dropdown.Item
        as={Button}
        key={uuid.v4()}
        ...
      >
        {item[2] + " (descending)"}
      </Dropdown.Item>
    </div>
  ))}
</Dropdown.Menu>;
Вернуться на верх