Warning: Duplicated key 'undefined' used in Menu by path []

Question

При нажатии на один из пунктов меню подсвечивается вся панель.

В консоли вылезает вот такая ошибка, хотя ключи переданы:

Warning: Duplicated key 'undefined' used in Menu by path [];

Но если я попрошу отрендерить сразу <Menu.Item key={i}>{el}</Menu.Item> всё работает прекрасно. К сожалению, этот кейс мне не подходит. Мне нужно вынести Menu.Item в отдельный компонент. Подскажите, пожалуйста. Вот мой код:

import { Layout, Menu, Breadcrumb } from 'antd';

const { Header, Content, Footer } = Layout;

const Item = (props:any) => {
  return(<Menu.Item >{props.el}</Menu.Item>)
}

const App = () => {
  let arr = ["Node_JS", "React", "Express", "MySQL"]
  let list = arr.map((el, i) => { return (<Item key={i} el={el}/>) })
  return (<Layout className="layout">
    <Header>
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" >
        {list}
      </Menu>
    </Header>
    <Content style={{ padding: '0 50px' }}>
      <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item>Home</Breadcrumb.Item>
        <Breadcrumb.Item>List</Breadcrumb.Item>
        <Breadcrumb.Item>App</Breadcrumb.Item>
      </Breadcrumb>
      <div className="site-layout-content">Content</div>
    </Content>
    <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  </Layout>)
}

export default App

БЛОГ НА HUSL

Warning: Duplicated key 'undefined' used in Menu by path []

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