NavAccordion.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { Link, withRouter } from 'react-router-dom';

class NavAccordion extends React.PureComponent {
  constructor(props) {
    super();
    this.state = {
      showChildren: this.showChildren(props),
    };
  }

  showChildren = (props) => {
    const { location, children } = props;
    const locations = React.Children.map(children, c => c.props.to);
    return locations.includes(location.pathname);
  };

  toogleChildren = (e) => {
    e.preventDefault();
    const { showChildren } = this.state;
    this.setState({
      showChildren: !showChildren,
    });
  };
  // eslint-disable-next-line
  samePath = (location, component, value1, value2) => {
    return location.pathname === component.props.to ? value1 : value2;
  }

  render() {
    const { title, children, location } = this.props;
    return (
      <li>
        <Link to="" role="button" className="nav-label" onClick={this.toogleChildren}>
          {title} <span className="caret" />
        </Link>
        {this.state.showChildren && children)}
      </li>
    );
  }
}
NavAccordion.propTypes = {
  title: PropTypes.string.isRequired,
  children: PropTypes.array,
  location: PropTypes.object,
};

NavAccordion.defaultProps = {
  title: '',
  children: [],
  location: {},
};
export default withRouter(NavAccordion);