How to use

Item

function

in

antd

// Can't be a Pure Component due to Dropdown lookups overlay component type to set appropriate styles
const memberMenu = (onClick, availableMembers) => (
 <Menu>
  {availableMembers.length ? (
   availableMembers.map((m) => (
    <Menu.Item key={m.name} onClick={() => onClick(m)}>
     {m.title}
    </Menu.Item>
   ))
  ) : (
   <Menu.Item disabled>No members found</Menu.Item>
  )}
 </Menu>
)

frameworks.map((f) => (
     <Menu.Item key={f.id}>{f.title}</Menu.Item>
    ))

renderFilesMenu() {
  const { selectedFile, files } = this.state;
  return (
   <Menu
    mode="inline"
    onClick={({ key }) => {
     playgroundAction('Select File');
     this.setState({ selectedFile: key });
    }}
    selectedKeys={selectedFile ? [selectedFile] : []}
   >
    {files.map((f) => (
     <Menu.Item key={f.fileName}>{f.fileName}</Menu.Item>
    ))}
   </Menu>
  );
 }

const SelectChartType = ({ chartType, updateChartType }) => {
 const menu = (
  <Menu>
   {ChartTypes.map((m) => (
    <Menu.Item key={m.title} onClick={() => updateChartType(m.name)}>
     {m.icon} {m.title}
    </Menu.Item>
   ))}
  </Menu>
 );

 const foundChartType = ChartTypes.find((t) => t.name === chartType);
 return (
  <ButtonDropdown overlay={menu} icon={foundChartType.icon}>
   {foundChartType.title}
  </ButtonDropdown>
 );
}

  style={{ lineHeight: '64px' }}
  <Menu.Item key="/"><Link to="/">Track Stories</Link></Menu.Item>
  <Menu.Item key="/statistics"><Link to="/statistics">Statistics</Link></Menu.Item>
 </Menu>
</Header>
  }}
  <Breadcrumb.Item>
   <Link to="/">Dashboard</Link>
  </Breadcrumb.Item>
  {match && match.params && match.params.storyId && (
   <Breadcrumb.Item>Story #{match.params.storyId}</Breadcrumb.Item>
  )}
 </Breadcrumb>

overlay={
 <Menu>
  <Menu.Item key="/build">
   <Link to="/build">Build</Link>
  </Menu.Item>
  <Menu.Item key="/dashboard">
   <Link to="/dashboard">Dashboard App</Link>
  </Menu.Item>
  <Menu.Item key="/schema">
   <Link to="/schema">Schema</Link>
  </Menu.Item>
 </Menu>

 {member.granularities.length ? (
  member.granularities.map((m) => (
   <Menu.Item key={m.title} onClick={() => onClick(m)}>
    {m.title}
   </Menu.Item>
  ))
 ) : (
  <Menu.Item disabled>No members found</Menu.Item>
 )}
</Menu>
<Menu>
 {DateRanges.map((m) => (
  <Menu.Item key={m.title || m.value} onClick={() => onClick(m)}>
   {m.title || m.value}
  </Menu.Item>
 ))}
</Menu>

  <Menu.Item key={library.value}>{library.title}</Menu.Item>
 ))}
</Menu>
  <Menu.Item key={f.id}>{f.title}</Menu.Item>
 ))}
</Menu>
  <Menu.Item key={f.name}>{f.description}</Menu.Item>
 ))}
</Menu>
  <Form.Item label="Framework">
   <Dropdown overlay={frameworkMenu}>
    <Button>
    </Button>
   </Dropdown>
  </Form.Item>
  {frameworkItem && frameworkItem.docsLink && (
   <Alert
  <Form.Item label="Main Template">
   <Dropdown
    overlay={templatePackagesMenu}
    </Button>
   </Dropdown>
  </Form.Item>

chartLibraries.map((library) => (
     <Menu.Item key={library.value}>{library.title}</Menu.Item>
    ))

const RememberMe = () => (
 <Form.Item name="remember" valuePropName="checked" noStyle>
  <Checkbox>Remember me</Checkbox>
 </Form.Item>
)

const Steps = (props) => (
 <Timeline>
  {props.steps.map(item => (
   <Timeline.Item key={item.title} color={item.finshed ? 'green' : '#eee'}>
    {item.title}
   </Timeline.Item>
  ))}
 </Timeline>
)

const DocumentsList = ({ documents, renderItem }) => (
  <List
    bordered
    className={`${styles.list}`}
    dataSource={documents}
    size="large"
    renderItem={item => <List.Item>{renderItem(item)}</List.Item>}
  />
)

render() {
  const { label, name, form, layout } = this.props;

  return (
   <Form.Item {...layout} label={label}>
    <strong>{form.values[name]}</strong>
   </Form.Item>
  );
 }

function LeftMenu(props) {
 return (
  <Menu mode={props.mode}>
   <Menu.Item key="mail">
    <a href="/">Home</a>
   </Menu.Item>
   <Menu.Item key="subscription">
    <a href="/subscription">Subscription</a>
   </Menu.Item>
  </Menu>
 );
}

function () {
              if (permissionOrOverride("canSelfProjects")) {
                return <Menu.Item key="projects" icon={<ProjectOutlined/>}
                         onClick={() => changePage("/home/projects")}>Projects</Menu.Item>
              } else {
                return "";
              }
            }()