dropdown ui component for react
/* eslint-disable no-console */
import Dropdown from 'rc-dropdown';
import Menu, { Item as MenuItem } from 'rc-menu';
import 'rc-dropdown/assets/index.css';
import React, { PureComponent } from 'react';
import ReactDOM from 'react-dom';
class Example extends PureComponent {
state = { longList: false };
short = () => {
this.setState({ longList: false });
}
long = () => {
this.setState({ longList: true });
}
render() {
const menuItems = [
<MenuItem key="1">1st item</MenuItem>,
<MenuItem key="2">2nd item</MenuItem>,
];
if (this.state.longList) {
menuItems.push(<MenuItem key="3">3rd LONG SUPER LONG item</MenuItem>);
}
const menu = (
<Menu>
{menuItems}
</Menu>
);
return (
<div>
<Dropdown overlay={menu}>
<button>
Actions
</button>
</Dropdown>
<button onClick={this.long}>Long List</button>
<button onClick={this.short}>Short List</button>
</div>
);
}
}
ReactDOM.render(
<Example />,
document.getElementById('__react-content')
);