Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // ES6, React 0.14
- var MenuItem = ({onClick, text, active}) => (
- <button onClick={onClick} style={active? {color: 'red'} : null}>{text}</button>
- );
- // example of use: <MenuBar buttons={['cat', 'dog', 'penguin']}/>
- class MenuBar extends React.Component {
- constructor(props) {
- super(props);
- this.state = {activeIndex: 0};
- }
- handleItemClick(index) {
- this.setState({activeIndex: index});
- }
- render() {
- var activeIndex = this.state.activeIndex;
- return <div>
- {
- this.props.buttons.map(
- (btn, i) => (
- <MenuItem
- active={activeIndex === i}
- key={i}
- onClick={this.handleItemClick.bind(this, i)}
- text={btn} />
- )
- )
- }
- </div>
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement