import React, { Component } from 'react'; import _isEmpty from 'lodash/isEmpty'; import PropTypes from 'prop-types'; import { Menu } from 'semantic-ui-react'; export default class ScrollingMenuItem extends Component { constructor(props) { super(props); this.state = { activeItem: props.children .map((child) => child.props.elementId) .find((id) => !_isEmpty(id)), }; } setActiveLink = (elementId) => { this.setState({ activeItem: elementId }); }; render() { const { children, offset } = this.props; const { activeItem } = this.state; const childrenWithProps = React.Children.map(children, (child) => React.cloneElement(child, { setActiveLink: this.setActiveLink, activeItem: activeItem, offset: offset, }) ); return ( <Menu pointing secondary vertical fluid className="left"> {childrenWithProps} </Menu> ); } } ScrollingMenuItem.propTypes = { offset: PropTypes.number, children: PropTypes.node, }; ScrollingMenuItem.defaultProps = { children: null, offset: 0, };