Ant design 4.20 new Menu item style

Question

Ant Design deprecated <Menu.Item> in 4.20.0, so I am converting it to a new format.

When I have the following code, how do I convert it into the new format?

<Menu>
  <Menu.Item key="1" className={css.first} onClick={onFirst}>item 1</Menu.Item>
  <Menu.Item key="2" className={css.second} onClick={onSecond}>item 2</Menu.Item>
</Menu>;

Answer 1

Ant Design v4.21.7 you can convert it like that

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import { Menu } from 'antd';

const App = () => {
  const [current, setCurrent] = useState();

  const onFirst = (e) => {
    console.log('click 1', e);
    setCurrent(e.key);
  };

  const onSecond = (e) => {
    console.log('click 2', e);
    setCurrent(e.key);
  };

  const items = [
    {
      label: 'Navigation One',
      children: [
        {
          label: 'item 1',
          onClick: onFirst,
          key: '1',
          className: 'first',
        },
        {
          label: 'item 2',
          onClick: onSecond,
          key: '2',
          className: 'second',
        },
      ],
    },
  ];

  return <Menu selectedKeys={[current]} mode="horizontal" items={items} />;
};

export default App;